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）/小时数。有什么办法可以使用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 希望对您有帮助！

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

1 个答案: