如何監聽“計數”變量的變化並根據其值觸發動作

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);