Javascript 使用jQuery查找选择选项与输入字段之和

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

我使用一个输入字段为每个主题输入分数和相应的小时选择选项。 我可以对一个主题正确地执行此操作，但当我将类“subject”添加到其他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 -->

平均值应为（标记1*hours\u表示标记1+标记2*hours\u表示标记2）/小时数。

---

使用jQuery有什么方法可以做到这一点吗？甚至是更好的结构

在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中检查解决方案：

---

希望有帮助

在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中检查解决方案：

---

希望有帮助

非常感谢Yavuz助教。如果值为NaN，我必须将小时数设置为0。即使用户输入的主题数量少于所有主题，也要计算该值，仅此而已。再次感谢你，非常感谢你。如果值为NaN，我必须将小时数设置为0。即使用户输入的主题数量少于所有主题，也要计算该值，仅此而已。再次感谢你。