如果Div包含精确文本，则添加类

If Div Contains EXACT text, add class

本文关键字：添加 文本 Div 包含精 如果      更新时间：2023-09-26

好的，所以我想制作一个脚本，如果这个代码包含确切的单词"123"，那么类"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>

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

你需要把你的脚本放在元素之后，如果它在元素之前，它找不到元素，因为DOM还没有呈现它。除非您将其包装在"jQuery document ready"函数中。

编辑以反映OP的变化

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

使用此：

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

===表示完全匹配

代码：

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

如果您想在计时器到达某个点时触发事件，可以通过以下几种方法来实现。

示例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>

试试这个

<script>
if ($(#1).text() === "is123";).addClass('a'))
</script>
<div id="1">is123</div>
相关文章：