javascript - 使用 jQuery 查找选择选项乘以输入字段的总和

Question

我正在尝试计算给定主题的平均值，并在用户更改值时直接打印平均值。

我正在使用输入字段来输入每个科目的分数和相应的小时选择选项。我可以正确地对一个主题执行此操作，但是当我将“主题”类添加到其他 div 时。我不知道如何在不混合主题值的情况下做同样的事情。

我的 HTML 代码的一部分:

<!-- Fourth Subject -->
      <div class="form-row text-center subject">
        <div class="col-4   ">
          <input type="text" name="mark4" class="form-control text-center mark" placeholder="العلامة">
        </div>
        <!--<div class="col-3">
          <input type="text" class="form-control text-center" placeholder="State">
        </div>-->
        <select id="select" name="option4" class="custom-select col-4 text-center hours" id="inlineFormCustomSelect">
          <option selected>عدد الساعات</option>
          <option value="1">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div class="col-4">
          <input type="text" name='subject4' class="form-control text-center" placeholder="إسم المادة">
        </div>
      </div>
      <!-- End of Fourth Subject -->
      </br>
      <!-- Fifth Subject -->
      <div class="form-row text-center subject">
        <div class="col-4   ">
          <input type="text" name="mark5" class="form-control text-center mark" placeholder="العلامة">
        </div>
        <!--<div class="col-3">
          <input type="text" class="form-control text-center" placeholder="State">
        </div>-->
        <select id="select" name="option5" class="custom-select col-4 text-center hours" id="inlineFormCustomSelect">
          <option  selected>عدد الساعات</option>
          <option value="1">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div class="col-4">
          <input type="text" name='subject5' class="form-control text-center" placeholder="إسم المادة">
        </div>
      </div>
      <!-- End of Fifth Subject -->

以下是我如何使用 jQuery 获取一个主题的值:

$('.subject').keyup(function () {

  var mark = 0;
  var hours = 0;
  $('.mark').change(function() {
    mark = Number($(this).val());
    console.log('mark is ' + mark);
    hours = $('select[name=option5]').val();
    $(".hours").change(function() {
      hours = $('select[name=option5]').val();
      console.log('hours are ' + hours);
    });
    $('#avg').val(mark*hours);
  });

  $(".hours").change(function() {
    hours = $('select[name=option5]').val();
    console.log('hours are ' + hours);

    $('.mark').each(function() {
      mark = Number($(this).val());
      console.log('mark is ' + mark);
      $('#avg').val(mark*hours);
    });
  });
});

平均值应为 (mark1 *hours_for_mark1 + mark2 *hours_for_mark_2)/number_of_hours。有什么方法可以使用 jQuery 来做到这一点吗？甚至更好的结构!？

Answer 1

在 dom 元素上添加事件处理程序时遇到严重问题。例如，您不应该在 keyup 中添加新事件，因为它会导致每次按下某个键时添加另一个事件监听器，并且会发生重复执行。试试下面这个，它是非常不言自明的:

var handler = function() {
  var total = 0;
  var totalHours = 0;
  $('.subject').each(function(){
    var mark = Number($(this).find('.mark').val())
    var hours = Number($(this).find('.hours').val())
    total += mark * hours;
    totalHours += hours;
  })

  $('#avg').text(total/totalHours);

}
$('.subject .mark').keyup(handler)
$('.subject .hours').change(handler)

您也可以在jsbin中查看解决方案: https://jsbin.com/timugivobi/edit?html,js,output希望对您有帮助!