Question

我试图创建一个表单，用户从0到100％选择答案; 我有25个问题。最后，我添加了每个问题的结果，并将其除以问题的数量，在我的情况下为25。到目前为止，没问题;它完美无缺，我的平均水平。

但如果用户决定不回答某个问题，我就会遇到问题。如果他回答20个问题，我除以20，没问题。但我计算的结果是“NaN＆＃39;因为某些变量不存在......

此解决方案适用于我：

<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

您遇到的问题是某些值为空，这意味着parseInt()无效。你想要的只是简单地将它们投射到0，如果它们是假的。

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

第一遍.filter()仅包含具有值
.map() + .get()个jQuery方法，它返回一个值数组（see more explanation here）
将数组相加的本地.reduce()方法

在获得总和之后，通过将总和除以您具有的输入元素的数量来简单地获得平均值。请参阅下面的概念验证：

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

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

然后当用户提交时，将您的函数更改为更动态，使用在class = question上执行查询选择器返回的集合的.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 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中添加不确定变量

3 个答案: