如何监听“计数”变量的变化并根据其值触发动作

Question

我在网页上有一个计数器，我想根据我的计数变量的值更改元素的样式。

我找到了 .change 操作，但不知道如何使其工作。这可能不是一个合适的解决方案。

你能帮忙吗？

var count = 0;
counter.innerHTML = count + "/30";


document.getElementById("button").onclick = function() {
count++;
counter.innerHTML = count + "/30";
}

  
$(count).change(function(){
  var x = document.getElementById("changed");
  if (count >= 5) {
    x.style.color = "red";
  }})

<div id="counter">
  Counter
</div>
<div id="button">Click to add 1
</div>
<div id="changed">This must turn red when counter > 5
</div>

Answer 1

由于计数器仅由您的代码更新，因此您可以在增加计数后直接添加检查。

var count = 0;
counter.innerHTML = count + "/30";
var x = document.getElementById("changed");

document.getElementById("button").onclick = function() {
  count++;
  if (count >= 5) {
    x.style.color = "red";
  }
  counter.innerHTML = count + "/30";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">
  Counter
</div>
<div id="button">Click to add 1
</div>
<div id="changed">This must turn red when counter >= 5
</div>

如果要在多个位置递增计数器，可以使用function 来封装值的更新和检查。

var count = 0;
counter.innerHTML = count + "/30";
var x = document.getElementById("changed");

document.getElementById("button").onclick = function() {
  updateCount(1);
  counter.innerHTML = count + "/30";
}

function updateCount(inc){
  count += inc;
  if (count >= 5) {
    x.style.color = "red";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">
  Counter
</div>
<div id="button">Click to add 1
</div>
<div id="changed">This must turn red when counter >= 5
</div>

Answer 2

考虑以下 jQuery 示例。

$(function() {
  var count = 0;
  $("#button").click(function() {
    $("#counter").html("Counter: " + ++count + "/30");
    if (count > 5) {
      $("#changed").css("color", "red");
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">Counter</div>
<div id="button">Click to add 1</div>
<div id="changed">This must turn red when counter > 5</div>

如果您更喜欢 Native JS，请考虑以下内容。

var count = 0;
document.getElementById("button").addEventListener("click", function() {
  document.getElementById("counter").innerHTML = "Counter: " + ++count + "/30";
  if (count > 5) {
    document.getElementById("changed").style.color = "red";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">Counter</div>
<div id="button">Click to add 1</div>
<div id="changed">This must turn red when counter > 5</div>

每个都将click 事件分配给button 元素。然后每次单击按钮时检查count 变量并使用条件语句执行更改。

如果您有很多按钮，请将详细信息移动到它们自己的函数中，以便每个按钮都可以调用该函数。

function updateCount(){
  $("#counter").html("Counter: " + ++count + "/30");
  if (count > 5) {
    $("#changed").css("color", "red");
  }
}

click 回调可以从任何按钮调用此函数。

$("#button").click(updateCount);

或者

document.getElementById("button").addEventListener("click", updateCount);

Answer 3

如前所述，您不能对变量更改“做出反应”（除非它们是对象的属性，在这种情况下，您可以定义一个以您需要的方式做出反应的 setter）。

相反，只需检查变量发生发生变化的地方：

let count = 0;
const counter = document.getElementById("counter");
counter.textContent = count + "/30";

function incrementCount() {
  count++;
}

function updateCounter() {
  counter.textContent = count + "/30";
}

function checkCounterGreaterThanFour() {
  if (count >= 5) {
    document.getElementById("changed").style.color = "red";
  }
}

document.getElementById("button").addEventListener('click', incrementCount);
document.getElementById("button").addEventListener('click', updateCounter);
document.getElementById("button").addEventListener('click', checkCounterGreaterThanFour);

<div id="counter"></div>
<button type="button" id="button">Click to add 1</button>
<div id="changed">This must turn red when counter > 5</div>

在提到的那些之上我已经改变的事情：

• 将var 更改为let 或const。 var 不再使用，除非您需要它的详细信息
• 将 div#button 更改为真正的 button 元素以获得更好的语义
• 使用document.getElementById 正确定义了所有变量。我知道所有具有唯一 id 的元素都可以作为浏览器中的全局变量使用，但代码不应该依赖它，因为代码的任何其他部分都可能修改/覆盖那些
• 将button.onclick = ... 更改为button.addEventListener('click', ...。最好始终使用addEventListener，它允许添加任意数量的侦听器，而onclick 属性始终只能引用一个处理程序
• 将click 拆分为三个函数以供重复使用。事件监听器，当事件发生时，会按照代码添加的顺序运行。