在 jQuery 中對 var 編號進行任何更改后，如果 {} function 如何觸發？ 而不僅僅是在准備好文件時觸發

Question

在更改 jQuery 中的 var 編號后，我正在努力弄清楚如何觸發 if function。 目的是使用該變量將 html 類添加/刪除到不同的錨點。 目前，function 僅適用於文檔加載，響應我輸入的占位符編號。

這是js/jQuery：

//calls the url, which will have a number at end
var pathname = window.location.pathname;
//this isolates the number from the url
var str = pathname.replace("/Users/xxx/Desktop/CODING/WEB%20(HTML5%20&%20CSS)/JPF%20PORTFOLIO/CODE/", "");

$(document).ready(function() {
//var = 'numbaa' is a placeholder for the url number
var numbaa = 2;
// two buttons, one moves value up - other moves down (and loops after cap)
   $("#icona2").click(function() {
      if (numbaa >= 3) {
        numbaa = 1
        alert(numbaa);
      } else {
      numbaa++;
      alert(numbaa);
      }
   });
   $("#icona1").click(function() {
      if (numbaa <= 1) {
        numbaa = 3
        alert(numbaa);
     } else {
      numbaa--;
      alert(numbaa);
     }
   });

  //from the value, add a class to the correct html anchor
    if (numbaa == 1){
      $(".itemadd").removeClass("itemadd");
      $(".txtitem1").addClass("itemadd");
    }else{};
    if (numbaa == 2){
      $(".itemadd").removeClass("itemadd");
      $(".txtitem2").addClass("itemadd");
    }else{};

});

干杯

Answer 1

將要運行的代碼放入 function 中。 在頁面加載時調用它。 並在按鈕點擊中調用它。

$(document).ready(function() {
  var numbaa = 2;
   $("#icona2").click(function() {
      // your code
      changeDisplay();
   });
   $("#icona1").click(function() {
      // your code
      changeDisplay();
   });

   function changeDisplay () {
     if (numbaa == 1){
     }
   }
});

現在我會減少所有重復的代碼並使用數據屬性。 基本思路如下。

 var numbaa = 1; function changeDisplay() { console.log(numbaa); // your add remove class code here } $(".count").on("click", function () { var btn = $(this); var dir = Number(btn.data("dir")); numbaa+= dir; if (numbaa > 3) numbaa = 1; else if (numbaa < 1) numbaa = 3; changeDisplay(); }); changeDisplay();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="count" data-dir="-1">DOWN</button> <button class="count" data-dir="1">UP</button>

Answer 2

你試過了嗎：

$('.theNumberClass').change(function() {
console.log('hey, your number changed');
});