Javascript - 僅當輸入值大於 999 時才顯示 div

Question

我正在使用用戶@Bibberty開發的腳本進行練習，其中有用於計算點擊次數的按鈕，克隆了 div 並且還計算了輸入值，並且所有這些都在 LocalStorage 下運行，一切都運行良好，但是使用 JS 進行練習（我正在新手，0級），我無法添加新功能

我的興趣是顯示一個 div (#regalo)，僅當輸入 #total 的值介於 999 和 1,500 之間時。

這僅在我放置值時有效，但在自動模式下不起作用...

查看實時演示（jsfiddle，代碼片段不會在此處運行）

任何的想法...？

提前致謝！

//----------------

腳本：

$(document).ready(function(){
    if($('#total').val() > 999 ) {
         $('#regalo').show();
    }
    $('#total').on('change',function(){
        if($(this).val() > 999 ) {
            $('#regalo').show();
        }
        else{
            $('#regalo').hide();
        }
    })
})

Answer 1

添加這個

$('.comp-clone').on('click',function(){
    if($('#total').val() > 999) {
        $('#regalo').show();
    }
    else{
        $('#regalo').hide();
    }
})

您沒有檢查輸入字段是否更改您正在檢查是否更改它

$(document).ready(function(){
    if($('#total').val() > 999 ) {
         $('#regalo').show();
    }
    $('#total').on('change',function(){
        if($(this).val() > 999 ) {
            $('#regalo').show();
        }
        else{
            $('#regalo').hide();
        }
    })
    $('.comp-clone').on('click',function(){
        if($('#total').val() > 999) {
            $('#regalo').show();
        }
        else{
            $('#regalo').hide();
        }
    })
})

這應該對你有用，但如果你想稍微清理一下

$(document).ready(function() {
    CheckTotal();
    $('#total').on('change', function () {
        CheckTotal();
    })
    $('.comp-clone').on('click', function () {
        CheckTotal();
    })
})

CheckTotal() {
    if ($('#total').val() > 999) {
        $('#regalo').show();
    }
    else {
        $('#regalo').hide();
    }
}

Answer 2

$(document).ready(function(){
  function manageRegalo() {
    const total = Number($("#total").val().replace(".",""));
    // or:
    //const total = suma();
    if(total > 999 && total < 1500) {
      $('#regalo').show();
    }
    else{
      $('#regalo').hide();
    }
  }

  $(document).on('click', function (event) {
      const target = event.target;
      if (target.matches('.comp-clone') || target.matches('.bbp')) {
        manageRegalo();
      }
    });
  manageRegalo();
});

JSFiddle

這里有幾個變化：

1. 不要使用display: none來隱藏它，那樣 jQuerys show()將不起作用。 而是立即調用hide() ，這就是我在最后一次直接調用manageRegalo()的方式。 如果您在開始時看到 regalo 的瞬間是個問題，請向包含display: none的元素添加另一個 CSS 類，並使用 jQuerys .addClass()和.removeClass()來顯示和隱藏 regalo。
2. $('#total').val()給你一個字符串值，你需要把它轉換成一個數字，但是這個字符串值里面可以有點，所以值 1.000 會被轉換成 1，所以我們首先需要刪除所有的點。 獲得點擊的另一種方法是使用在另一個 JS 代碼（在 HTML 窗口內）中定義的suma()函數，但那個函數會再次重新計算該值。
3. 您檢查了該值是否大於 999，但如果小於 1500 則不檢查。
4. 不要在 total-Element 上聽點擊，首先你不要點擊 total-Element：你點擊一個 Clone N Elements 或紅色的 Xs。 但是也不要直接監聽那些，因為 HTML 代碼中已經存在的 JS 代碼正在監聽文檔本身。 如果您要監聽 Clone N 或 Xs 元素，您將首先獲得點擊事件，但那時尚未計算總數，因此您總是會晚一次點擊獲得該值。

Answer 3

我查看了您發布的代碼，發現您有兩個主要問題。

永遠不要在不理解已經編寫的代碼的情況下嘗試添加更多代碼。

我們甚至在理解已經編寫的整個代碼之前就開始編寫一些代碼是很常見的事情，這是一個大問題，因為它可能導致其他代碼無法工作。 我會給你舉個例子來說明你的問題。 阻止您的代碼為您提供預期結果的原因是，在之前編寫的代碼中，將 valute 賦值給 id 為 total 的輸入的函數正在將輸入轉換為帶有String.toLocaleString()的字符串，該字符串轉換完全是從整數（這是你正在尋找的）到字符串的變量類型。

這是代碼中發生這種情況的地方：

const displaySuma=()=>document.getElementById("total").value=suma().toLocaleString("es-ES");

const suma = function() {
  return Array.from(document.querySelectorAll(".derecha div .add-prod"))
    .reduce((a, v) => a + parseFloat(v.value), 0);
}

因此，要實現所需的功能，您需要刪除附加到sum()函數的最后一個函數。 它將是這樣的：

const displaySuma=()=>document.getElementById("total").value=suma();

此外，無需向您的迷你應用程序添加額外的事件偵聽器。 就像我說的，在編寫更多代碼之前嘗試對它進行一些研究，如果你這樣做，你將很容易編寫 JavaScript 代碼並且在你實現修改已經編寫的代碼片段的目標時理解它是如何工作的代碼。

已經有一個事件監聽代碼中的值。

由於腳本已經有一個監聽#total值變化的事件，我們可以創建一個函數並檢查那里的條件。 這是事件監聽：

document.addEventListener('click', (event) => {
  let target = event.target;
  // Add
  if (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
    verifyCondition(); //We add our own function that we just made to verify the value.
  }
  // Remove
  if (target.matches('.bbp')) {
    removeClick();
    getParent('.derecha', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

現在，我們的函數將只是：（Vanilla JavaScript）

const verifyCondition = () =>{
    let total = Number(document.querySelector("#total").value);
    //We convert the value to integer anyways to prevent any kind of errors.
    if( 999 < total && total < 1200 ){//Check if value is between 999 and 1200
        document.getElementById("regalo").style="display:block;";
    }else{
        document.getElementById("regalo").style="display:none;";
    }
}

就是這樣，這是新工作代碼的小提琴。 嘗試檢查一下，並確保搜索您不理解的內容。 任何高級開發人員都是這樣開始的。

https://jsfiddle.net/ax0L12j7/