为什么我的jquery代码在使用ID但使用Class时不起作用

Why my jquery code wont work if with ID but Class

本文关键字：Class 不起作用 ID 我的 代码 为什么 jquery      更新时间：2023-10-01

我有这样的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')，代码将不起作用！

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

ID应始终是唯一的 。

使用类是这个问题的解决方案

请看一下下面的代码。你可以参考这个代码，并可以检查我们是如何计算平均的

  
  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>

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

  1. 因此，第一个keyup转到函数ave（），并将.ave与keyup事件绑定。

  2. 在第二个keyup上调用sameave（），然后从执行jquery keyup绑定第一个keyup然后执行.each（function（）<</strong>两次，然后再次执行元素绑定

  3. 第三个和其他的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));
}

五个演示

相关文章：