Question

我正在使用由用户 @Bibberty 开发的脚本进行练习，其中有一些按钮用于统计点击次数，克隆div并汇总输入值并全部运行在LocalStorage下，一切工作都很好，但是使用JS（我是新手，级别0）进行练习，我无法添加新功能

我的兴趣是仅在输入#total的值介于999和1,500之间的情况下显示div（#regalo）。

这仅在我放置值时有效，但在自动模式下不起作用...

SEE LIVE DEMO （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

这里有几个更改：

不要使用display: none来隐藏它，那样jQuery show()将无法工作。而是立即致电hide()，这样一来，我一开始就直接致电manageRegalo()。如果您在一开始可以看到regalo的瞬间是有问题的，请向包含display: none的元素中添加另一个CSS类，并使用jQuery .addClass()和.removeClass()来显示和隐藏雷加洛。
$('#total').val()为您提供了一个字符串值，您需要将其转换为数字，但是此字符串值中可以包含点，因此将值1.000转换为1，这就是我们首先需要删除的原因所有的点。另一种获得点击的方法是使用suma()函数，该函数是在另一个JS代码（在HTML窗口内）中定义的，但是该函数会重新计算该值。
您检查了该值是否大于999，但小于1500则没有。
不要在total-Element上单击单击，首先您不要单击total-Element：单击“克隆N个元素”之一或单击红色的Xs。但是也不要直接监听这些，因为HTML代码中已经存在的JS代码正在监听文档本身。如果您要侦听Clone N或Xs元素，则将首先获得click事件，但那时尚未计算总数，因此您总是可以一按即获得价值。

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/

礼炮！

Javascript-仅在输入值大于999时显示div

3 个答案:

切勿在不了解已编写代码的情况下尝试添加更多代码。

已经有一个事件在监听代码中的值。