Если Div содержит точный текст, добавьте класс

Question

Итак, я ищу, чтобы создать скрипт, где, если этот код содержит точное слово «is123», класс «a» будет добавлен в div id «# 1», проблема , ": contains" будет работать без ТОЧНО, содержащего всю строку. Я занимался исследованиями и находил ответы, но ни один из них не смог понять и применить к моей ситуации! Благодаря!

div id 1 - отсчет, который изменяется каждую секунду.

<div id="1">1:05</div> 
<div class="2 hidden">ayyy</div> 
<script> 
if ($("#1").text().trim() === "1:05") { 
$(".2").removeClass('hidden'); 
} 
</script> 

Answer 1

Если вы хотите, чтобы вызвать событие, когда таймер достигает определенной точки вы можете сделать это несколько способов.

Пример 1

Предпочтительно крючок в функции таймера сам, если у вас есть доступ к этому коду. Это, вероятно, является наиболее эффективным методом:

// This runs immediately when timer is updated 
 

 
function checkTime(timerValue) { 
 
    if (timerValue == '01:05') { 
 
    $('.alert').show(); 
 
    } 
 
} 
 

 
// SIMULATE YOUR TIMER - Courtesy of http://stackoverflow.com/a/20618517/1767412 
 

 
function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
    diff, 
 
    minutes, 
 
    seconds; 
 

 
    function timer() { 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 
    display.textContent = minutes + ":" + seconds; 
 
    if (diff <= 0) { 
 
     start = Date.now() + 1000; 
 
    } 
 

 
    // Call your function to check the time 
 
    checkTime(display.textContent); 
 
    }; 
 
    timer(); 
 
    setInterval(timer, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var display = document.querySelector('#timer'); 
 
    startTimer(70, display); 
 
};

.alert { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="timer"></div> 
 
<div class="alert">Time to show this div!</div> 
 
<div class="console"></div>

Пример 2

Или вы можете сделать что-то, как показано ниже, который должен опрашивать <div> содержимое с интервалами и вызвать событие, когда он соответствует вашим критериям. Я не люблю это так, потому что у вас есть дополнительный процесс, работающий на высокой частоте - но есть много случаев, когда это может быть единственным вариантом:

/* 
 
This runs once every 0.1 seconds so it will trigger 
 
almost immediately after the timer reaches 01:05 
 
*/ 
 

 
var t = setInterval(function() { 
 
    var timerValue = $("#timer").text().trim(); 
 
    if (timerValue == '01:05') { 
 

 
    // Stop watching the timer once it matches 
 
    clearInterval(t); 
 

 
    // Show the div 
 
    $(".alert").show(); 
 
    } 
 
}, 100); 
 

 

 
/* 
 
SIMULATE YOUR TIMER 
 
Courtesy of http://stackoverflow.com/a/20618517/1767412 
 
*/ 
 

 
function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
    diff, 
 
    minutes, 
 
    seconds; 
 

 
    function timer() { 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 
    display.textContent = minutes + ":" + seconds; 
 
    if (diff <= 0) { 
 
     start = Date.now() + 1000; 
 
    } 
 
    }; 
 
    timer(); 
 
    setInterval(timer, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var display = document.querySelector('#timer'); 
 
    startTimer(70, display); 
 
};

.alert { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="timer"></div> 
 
<div class="alert">Time to show this div!</div>

Answer 2

Используйте это:

$("#1").text()==="is123" 

=== означает точное совпадение

код:

<div id="1">is123</div> 
<script> 
if ($("#1").text()==="is123"){ 
    $("#1").addClass('a'); 
} 
</script> 

Answer 3

Тест

<script> 
if ($(#1).text() === "is123";).addClass('a')) 
</script> 

<div id="1">is123</div> 

Answer 4

<div id="1">is123</div> 
<script> 
if ($("#1").text().trim() === "is123") { 
    $("#1").addClass('a'); 
} 
</script> 

Вам нужно поместить свой скрипт после элемента, если он находится перед элементом, он не может найти элемент, потому что DOM еще не отобразил его. Если вы не закроете его в функции «jQuery document ready».

отредактирован REFLECT ИЗМЕНЕНИЙ OP

<div id="1">is123</div> 
<script> 
if ($("#1").text().trim() === "is123") { 
    $(".2").removeClass('hidden'); 
} 
</script>