Добавление в jQuery с неопределенной переменной - PullRequest
Новая
       8

Добавление в jQuery с неопределенной переменной

0 голосов
/ 02 мая 2018

Я пытаюсь создать форму, где пользователь выбирает ответ от 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);
});

Ответы [ 3 ]

0 голосов
/ 02 мая 2018

Проблема, с которой вы сталкиваетесь, заключается в том, что некоторые значения являются пустыми, что означает, что parseInt() не будет работать. То, что вы хотите, это просто привести их к 0, если они ложные.

Некоторые улучшения, которые вы можете сделать, - это использовать number в качестве типа ввода, а также дать всем полям общий класс, чтобы вы могли суммировать их, используя:

  1. первый проход .filter() для включения только тех элементов ввода, которые имеют значение
  2. Методы .map() + .get() jQuery, которые возвращают массив значений ( подробное описание см. Здесь )
  3. собственный .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 голосов
/ 02 мая 2018

Я работал над некоторыми функциями 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 голосов
/ 02 мая 2018

Вот так я бы поступил, сначала я бы поставил все входные данные вопроса в одном классе, например: 

<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; 
)};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...