javascript - jQuery 更改事件中忽略的条件？

Question

因此，我尝试根据输入启用/禁用按钮，但由于某种原因，我不知道为什么，它不会按照我想要的方式执行。

• 如果输入的值等于或介于 1-10 之间:启用按钮。
• 如果输入值小于 1:禁用按钮。

在更改输入值时，无论值如何，按钮始终处于启用状态。如果值设置为 0，则不会禁用它。变量 inputIn 保存输入，变量 inputBtn 保存按钮，因此您知道在哪里查看。

如果您发现我还有其他需要修复的地方，请告诉我，因为我对 jQuery 和 Javascript 还很陌生。

更新:

通过将更改事件中的所有语句更改为 if 语句来解决问题。但不是最佳的？

$(document).ready(function() {
let $table = $(".shoe-table");

fetch("shoes.json")
.then(resp => resp.json())
.then(data => {
  let shoes = data.shoes;
  let rows = [1, 2, 3];
  let shoeCard = "";

  let counter = 0;
  rows.forEach(row => {
    shoeCard += "<tr>";
    for (let index = 0; index < 4; index++) {
      shoeCard +=
        "<td class='card text-center'>" +
        "<img class='card-img-top' src=" +
        shoes[counter].image +
        " alt='Card image cap'>" +
        "<h5 class='card-title'>" +
        shoes[counter].name +
        "</h5>" +
        "<p class='card-text'>kr " +
        shoes[counter].price +
        "</p>" +
        "<button id=" +
        counter +
        " class='orderNow btn btn-outline-dark'>ORDER NOW</button>" +
        "<div id=" + counter + " class='input-form'><input class='qty-chooser' type='number' placeholder='Choose quantity' min=0 max=10>" +
        "<button class='btn-add-to-cart' disabled='disabled'>ADD TO CART</button>" +
        "</div>" +
        "</td>";
      counter++;
    }

    shoeCard += "</tr>";
  });

  $table.append(shoeCard);
  let $inputForm = $(".input-form");
  let $orderBtn = $(".orderNow");

  $inputForm.hide();

  $orderBtn.click(toggleOrder);

  function toggleOrder() {
    let clickedBtn = $(this);
    let thisInputForm = $("#" + clickedBtn.attr("id") + ".input-form");


    let inputBtn = thisInputForm.children("button");
    let inputIn = thisInputForm.children("input");

    function resetInputForm() {
      inputBtn.css("background", "");
      inputBtn.css("color", "");
      inputBtn.attr("disabled", "disabled");
      inputIn.val(null);
    }

    inputBtn.click(function() {
      console.log("ADDING");
      thisInputForm.hide("slow");
      clickedBtn.text("ORDER NOW");
      clickedBtn.css("background", "");
      resetInputForm();
    });
     // The change function with conditions that do not work
    inputIn.change(function() {
      console.log("change");
      let qty = inputIn.val();
      if (qty >= 1 || qty <= 10) {
        inputBtn.removeAttr("disabled");
        inputBtn.css("background", "rgb(15, 163, 10)");
        inputBtn.css("color", "white");
      } else if (qty < 1) {
        resetInputForm();
      }
    });

    if (clickedBtn.text() == "CANCEL") {
      thisInputForm.hide("slow");
      clickedBtn.text("ORDER NOW");
      clickedBtn.css("background", "");
      resetInputForm();
    } else {
      thisInputForm.show("slow");
      clickedBtn.text("CANCEL");
      clickedBtn.css("background", "red");
      inputBtn.attr("disabled", "disabled");
      resetInputForm();
    }
  }
})
.catch(err => console.error(err));
});

Answer 1

在您的代码中发现两个错误

html实体的
1. id应该是唯一的。您正在向 Div 提供相同的 id 和 ordernow 按钮。
2. 如果发生变化，您的情况应阅读此 qty >= 1 && qty <= 10因为你的值应该在 1 到 10 之间。