如何监听 "count" 变量变化并根据其值触发动作

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

如前所述，您不能对变量更改“做出反应”（除非它们是对象的属性，在这种情况下您可以定义一个 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 的元素都可以在浏览器中作为全局变量使用，但是代码不应该依赖它，因为代码的任何其他部分都可以有 modified/overwritten those
已将 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>

其中每一个都将一个 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);

如何监听 "count" 变量变化并根据其值触发动作

How to listen to a "count" variable change and trigger actions depending on its value

html

javascript

jquery

counter