在 jQuery 中添加不确定变量

Question

我正在尝试创建一个表单，用户可以在其中选择 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);
});

Answer 1

这就是我要做的，首先我会给所有的问题输入相同的 class 像这样：

<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">

然后当用户提交时，将您的功能更改为更加动态，使用通过在 class = 问题上执行查询选择器返回的集合的 .length，这将为您提供问题总数，以防您添加或删除问题。然后遍历集合中的每一个并检查 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; 
)};

Answer 2

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

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

第一遍 .filter() 仅包含具有值的输入元素
.map() + .get() jQuery methods, which returns an array of values (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">

Answer 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>

在 jQuery 中添加不确定变量

Additioning in jQuery with uncertain variable

jquery

addition