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

Question

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

我找到了 .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

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

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

 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拆分为三个功能以便重复使用。 事件侦听器，当事件发生时，将按照代码添加它们的顺序运行。

Answer 3

考虑以下 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>

这些中的每一个都会为button元素分配一个click事件。 然后就是在每次单击按钮时检查count变量并使用条件语句来执行更改。

如果你有很多按钮，将详细信息移动到自己的 function 这样每个按钮都可以调用 function。

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

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

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

要么

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