JavaScript在指定條件下阻止按鈕事件-有解無憂

我有一個類似網店的購物車功能。它顯示為您添加的產品。您可以通過單擊和-按鈕更改產品數量。單擊按鈕時，AJAX 呼叫將發送到更新資料庫的 PHP 檔案，以便您立即保存實際數量。當您增加或減少所選數量時，會出現一個計數器，指示原始產品將增加多少倍。您可以增加或減少之間的數量1 and 30。當您到達示例 1 時，計數器停止，但 AJAX 呼叫將被發送，無論它不應低于 1。

預覽視頻

let subt = 30; // The value from PHP after you sent the AJAX call and reloaded the page
document.getElementById("plus").addEventListener("click", () => {
  if (document.getElementById("inp").value < 30) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value)   1;
  }
  if (document.getElementById("inp").value > 1) {
    /*
        var bsi__data = new FormData(); bsi__data.append("pid", '(product id)'); bsi__data.append("quantity", document.getElementById("inp").value); bsi__data.append("price", "30");
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log(data); subt  = Number('30'); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
    subt  = Number('30');
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});
document.getElementById("min").addEventListener("click", function dicr() {
  if (document.getElementById("inp").value > 1) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value) - 1;
  }
  if (document.getElementById("inp").value >= 1) {
    /*
    var bsi__data = new FormData(); bsi__data.append("pid", "(product id)"); bsi__data.append("quantity", document.getElementById("inp").value);
    $.ajax({
        enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
        success: function(data) { console.log("decr"); subt -= Number(30); document.getElementById("subtotal").textContent = formatter.format(subt); },
        error: function (data) { console.log("error"); console.log(data); }
    });
    */

    subt -= Number(30);
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});

<div>
  <span>Product name</span><span id="price">$30</span><span id="ind"></span>
  <div>
    <span id="plus"> </span>
    <input type="number" id="inp" min="1" max="30" value="1" />
    <span id="min">-</span><br><br>
    <span>Subtotal: $</span>
    <span id="subtotal">30</span>
  </div>
</div>

uj5u.com熱心網友回復：

https://jsfiddle.net/jner??x76z/

document.getElementById("plus").addEventListener("click", () => {
  if (document.getElementById("inp").value < 30) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value)   1;
  }
  if (document.getElementById("inp").value > 1) {
    /*
        var bsi__data = new FormData(); bsi__data.append("pid", '(product id)'); bsi__data.append("quantity", document.getElementById("inp").value); bsi__data.append("price", "30");
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log(data); subt  = Number('30'); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
    subt  = Number('30');
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});
document.getElementById("min").addEventListener("click", function dicr() {
    var newValue;
  if (document.getElementById("inp").value > 1) {
    newValue = Number(document.getElementById("inp").value) - 1;
    document.getElementById("inp").value = newValue;
  }
  if (newValue >= 1) {
  alert(newValue)
    /*
    var bsi__data = new FormData(); bsi__data.append("pid", "(product id)"); bsi__data.append("quantity", document.getElementById("inp").value);
    $.ajax({
        enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
        success: function(data) { console.log("decr"); subt -= Number(30); document.getElementById("subtotal").textContent = formatter.format(subt); },
        error: function (data) { console.log("error"); console.log(data); }
    });
    */

    subt -= Number(30);
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});

uj5u.com熱心網友回復：

執行所需操作的簡單方法是使用Math.min()并Math.max()設定欄位的允許范圍。然后，您修改邏輯以在更新時根據該欄位的值計算小計，而不是通過維護全域變數。

另請注意，您應該將代碼中經常參考的 Element 物件放入變數中。這使您的代碼更短且更易于閱讀，并且由于訪問 DOM 是一個相對較慢的操作，因此應該盡可能避免它，因此它的性能更高。

話雖如此，這是一個作業示例：

let inp = document.querySelector('#inp');
let ind = document.querySelector('#ind');
let subtotal = document.querySelector('#subtotal');
let minQty = 0;
let maxQty = 30;
let itemCost = 30;

document.querySelector("#plus").addEventListener("click", () => {
  inp.value = Math.min(maxQty, Math.max(minQty,  inp.value   1));
  updateSubtotalUI();
});

document.getElementById("min").addEventListener("click", function dicr() {
  inp.value = Math.min(maxQty, Math.max(minQty,  inp.value - 1));
  updateSubtotalUI();
});

let updateSubtotalUI = () => {
  let subt = inp.value * itemCost;
  subtotal.textContent = subt.toLocaleString();
}

<div>
  <span>Product name</span>
  <span id="price">$30</span>
  <span id="ind"></span>
  <div>
    <span id="plus"> </span>
    <input type="number" id="inp" min="1" max="30" value="1" />
    <span id="min">-</span><br><br>
    <span>Subtotal: $</span>
    <span id="subtotal">30</span>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480796.html

標籤：javascript php html jQuery

上一篇：僅當數字較高時才在本地存盤中設定分數

下一篇：javascript或jquery查找nextSibling