Question

我有这样的HTML代码。

<input onkeyup="ave()" type="text" name="1" class = "ave" style="width: 60px"></td>
<input onkeyup="ave()" type="text" name="2" class = "ave" style="width: 60px"></td>
<input onkeyup="ave()" type="text" name="3" class = "ave" style="width: 60px"></td>

像这样的jQuery

function ave(){

   $('.ave').keyup(function(){
      var sum = 0;
      var ave = 0;
      $('.ave').each(function(){
        sum += +$(this).val();
      });
      var ave  = sum/3;
      $('.total').val(ave.toFixed(2));
   });
}

如果我将“class”更改为“ID”并将$('.ave')更改为$('#ave')，则代码将无效！

Answer 1

ID在HTML文档中是唯一的，Id只能在文档中使用一次，但类可以在同一文档中多次使用。 ID通常标识文档中的唯一项目，其中类有助于将共同样式应用于整个页面中的多个项目。因此，您的问题不能使用Id。

Answer 2

ID应始终为唯一 。

使用class是此问题的解决方案

Answer 3

请看下面的代码。您可以参考此代码，并可以检查我们如何计算平均值

  
  function ave(){
    var sum = 0;
    var ave = 0;
    
    $('.myTextboxContainer input').each(function(){
        if(!isNaN($(this).val()))
          sum += +$(this).val();
    });
    ave  = sum/$('.myTextboxContainer input').length;
    $('.total').val(ave.toFixed(2));
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<table class="myTextboxContainer">
  <tr>
  <td><input onkeyup="ave()" type="text" name="1" id = "ave1" style="width: 60px"></td>
  <td><input onkeyup="ave()" type="text" name="2" id = "ave2" style="width: 60px"></td>
  <td><input onkeyup="ave()" type="text" name="3" id = "ave3" style="width: 60px"></td>
  </tr>
</table>  

<div>
  Average is : <input  type="text" class="total"></span>
</div>

Answer 4

在您的代码中，您将绑定相同的元素两次。 onkeyup="ave()"并在函数$('.ave').keyup(function()里面javascript首先调用你的函数 ave（）但是还有一个时间绑定keyup对象..

所以第一个keyup进入函数ave（）并使用keyup事件绑定 .ave 。
第二个keyup是同一个 ave（），然后从第一个keyup 执行jquery keyup绑定，然后 .each（function（）{ 执行两次然后再次执行元素绑定
第三个和另一个keyup将进行复杂绑定4次执行keyup，依此类推。

最佳做法

 <input onkeyup="ave()" type="text" name="1" class = "ave" style="width: 60px"></td>
    <input onkeyup="ave()" type="text" name="2" class = "ave" style="width: 60px"></td>
    <input onkeyup="ave()" type="text" name="3" class = "ave" style="width: 60px"></td>

Javascript

function ave(){
      var sum = 0;
      var ave = 0;
      $('.ave').each(function(){
        sum += +$(this).val();
      });
      var ave  = sum/3;
      $('.total').val(ave.toFixed(2));
}

FiDDLE DEMO

为什么我的jquery代码不能使用ID但是Class

4 个答案: