获取 .each() 函数中变量的值 jQuery

如何解决获取 .each() 函数中变量的值 jQuery

我有下面的代码。

代码工作正常，但如果我取消注释“if”语句，一旦我在输入字段中输入内容，就会显示警报。

我希望只有在输入所有 3 个输入字段后才检查“sum”值（显示警报）。

请帮我修复它。谢谢。

<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val1__c}" />
<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val2__c}" />
<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val3__c}" />

$(document).ready(function() {
  $(document).on("input",".Weight",function(e) {
    var sum = 0;
    $('.Weight').each(function() {
      var num = $(this).val();
      if (num != null && !isNaN(num)) {
        sum += parseFloat(num);
      } else {
        alert("Accept number only");
      }
    });

    //if (sum != 1){ // sum !=1 doesn't work
    //  alert("The total of Weight must be 1");
    //} 
  });
});

解决方法

您可以使用状态标志来判断所有输入是否有效，请参阅下面的示例代码。

此外，val() 元素的 AFAIK <input> 永远不会返回 null，如果没有输入，它会返回 ""。这就是我使用 if (num && ... 的原因，在这种情况下，这意味着“仅当 num 包含文本时才继续”。

$(document).ready(function() {
  $(document).on("change",".Weight",function(e) {
    var sum = 0;
    var allInputsValid = true; // <-- flag variable
    $('.Weight').each(function() {
      var num = $(this).val();
      if (num && !isNaN(num)) {
        sum += parseFloat(num);
      } else {
        allInputsValid = false;
      }
    });
    if (allInputsValid) {
      console.log("All inputs have numbers.");
      if (sum != 1) {
        console.log("The total of Weight must be 1,but it is: " + sum);
      } else {
        console.log("The total of Weight is 1.");
      }
    } else {
      console.log("Not all input have numbers yet.");
    }
  });
});

.Weight { width: 50px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#1: <input class="Weight" /> #2: <input class="Weight" /> #3: <input class="Weight" />

---

PS - 即使这样，由于浮点数学的工作方式，您可能无法完成这项工作。由于内部四舍五入，您期望为 1 的数字总和并不总是恰好为 1：

var x = parseFloat("0.34") + parseFloat("0.56") + parseFloat("0.10");
console.log(x);
console.log(x === 1);