なぜ私のjqueryコードは、IDではクラスが動作しません

Question

私はこのようなhtmlコードがあります。

これは

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)); 
    }); 
} 

私は 'ID' と$('#ave')から$('.ave')に 'クラス' を変更した場合のコードは動作しませんよう

<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を！

Answer 1

IDは常に一意である必要があります。。クラスを使用して

Answer 2

IDは、HTML文書内で一意であるこの問題の解決策である、Idは文書で一度だけ使用することができますが、クラスが同じドキュメント内で複数回使用することができます。 IDは通常、ドキュメント内のユニークなアイテムを識別します。クラス内では、ページ全体の複数のアイテムに共通のスタイルを適用できます。したがって、あなたの問題のためにIDを使用することはできません。

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（）が、1つのより多くの時間バインディングからkeyupオブジェクトがある..

1. だから最初からkeyupはAVEを（）関数と.aveをバインドするために行きますkeyupイベントのある。第2のkeyUpイベントで

2. （同じAVEコールである）.each（関数（）{が再び二回、次いで実行素子バインド

3. それでは第keyUpイベントからjQueryのkeyUpイベントバインドを行います第三及びその他から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