在 jQuery 中添加不确定变量答案

【问题标题】：Additioning in jQuery with uncertain variable在 jQuery 中添加不确定变量
【发布时间】：2018-05-02 12:55:39
【问题描述】：

我正在尝试创建一个表单，用户可以在其中选择从 0 到 100% 的答案；我有 25 个问题。最后，我将每个问题的结果相加，然后除以问题数，在我的情况下为 25。到目前为止，没有问题；它工作得很好，我有我需要的平均水平。

但是我有一个问题，如果用户决定不回答某个问题。如果他回答 20 个问题，我除以 20，没问题。但是我的计算结果是'NaN'，因为某些变量不存在......

这个解决方案对我有用：

<input type="text" class="q" value="">
<input type="text" class="q" value="">
<input type="text" class="q" value="">

<input type="submit" class="send" value="send">

JS : 
$(".send").click(function() {
   let answeredCount = 0;
   var sum = 0;
  $('.q').each(function(){
    if(!isNaN(parseInt($(this).val()))){
    answeredCount++;
    }
    sum += Number($(this).val());
});
var result = parseInt(sum/answeredCount);
alert (result);
});

【问题讨论】：

在下面提供了解决方案。

标签： jquery addition

【解决方案1】：

您遇到的问题是某些值是空白的，这意味着parseInt() 将不起作用。如果它们是虚假的，您想要简单地将它们转换为 0。

您可以做的一些改进是实际使用number 作为输入类型，并为所有字段提供一个通用类，以便您可以使用以下方法对它们进行总结：

第一次通过 .filter() 仅包含具有值的输入元素
.map() + .get() jQuery 方法，它返回一个值数组 (see more explanation here)
对数组求和的原生 .reduce() 方法

获得总和后，只需将总和除以您拥有的输入元素的数量即可获得平均值。请参阅下面的概念验证：

$(function() {
  $('.send').click(function() {
      // Get collection of non-empty inputs
      var $q = $('.q').filter(function() {
        return this.value;
      });
      
      // Get sum of all values
      var sum = $q.map(function() {
        var value = parseInt(this.value);
        return isNaN(value) ? 0 : value;
      }).get().reduce(function(val, cumulativeSum) {
        return val + cumulativeSum;
      }, 0);
      
      // Calculate average
      var average = sum / $q.length;
      console.log(average);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' class="q" value=''>%
<input type='number' class="q" value=''>%
<input type='number' class="q" value=''>%

<input type="button" class='send' value="send">

【讨论】：

非常感谢您的回答。但如果答案为空白，则与“0”不完全相同。这是我在这里最大的问题。因为在你的 sn-p 中，如果我尝试：空白 - 100 - 100，答案是 66.66%。我想要 50%
@Clémentine 啊，如果这就是你想要的，我已经更新了我的答案，添加了一个额外的第一通过滤器，只包含具有非空值的输入元素:)

【解决方案2】：

这就是我要做的事情，首先我会给所有的问题输入同一个类，如下所示：

<input type='text' class="question" value=''>
<input type='text' class="question" value=''>
<input type='text' class="question" value=''>
Etc...
<input type="submit" class='send' value="send">

然后，当用户提交时，将您的函数更改为更加动态，使用 .length 通过在 class= question 上执行查询选择器返回的集合的长度，这将为您提供问题总数，以防您添加或删除问题。然后迭代每个集合并检查 NaN 值，如果是 NaN，则不要将其添加到用户回答问题的计数中，如下所示：

 $('.send').click(function(){
    const totalQuestions = $('.question').length;
    let answeredCount = 0;

    $('.question').each(function(){
        if(!isNaN(parseInt($(this).val()))){
              answeredCount++;
        }
    }

    //Divide answeredCount by the total questions * 1.0 
    //to get a floating point number, then multiply by 100 to get the percentage
    const result = (answeredCount / (totalQuestions * 1.0)) * 100; 
)};

【讨论】：

感谢您的帮助 Ryan，我试过了，但我不确定是否能做好事...我发现您的解决方案和其他解决方案之间存在混合。
@Clémentine 您遇到了什么问题？

【解决方案3】：

我为上述场景开发了一些 jquery 函数。这可能会解决您的问题。试试这个。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var valueArray = $('.question').map(function() {
            return this.value;
        }).get();
        var temp = valueArray;
        function getSum(total, num) {
            if(num == ''){
                num = 0;
            }
            return parseInt(total) + parseInt(num);
        }
        var result = (temp.reduce(getSum))/ valueArray.length;
    });
</script>
</head>
<body>
    <input type='text' class="question" value='1'>
    <input type='text' class="question" value='2'>
    <input type='text' class="question" value='3'>
    <input type='text' class="question" value=''>
</body>
</html>

【讨论】：

首先，非常感谢您的帮助！我认为这与特里的答案相同：如果答案为空白，则与“0”不完全相同。这是我最大的问题。