異なるHTML要素に対して同じJQueryコードを実行する方法は？

Question

おはようございます、いつもお世話になりました 私は初心者でウェブを開発し、学習のための小さなプロジェクトに取り組んでいます。

私は私が各1の値に応じた割合-星を埋めるためにしようとしていた、このコードを持っている（私はそれは非常に単純だと確信していますが、私は何をすべきは考えている）問題

を持っています：

$.fn.stars = function() { 
 
    return $(this).each(function() { 
 
     $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16)); 
 
    }); 
 
} 
 

 
for (i = 1; i< 3 ; i++) { 
 
    var val = 'input[name=amount'+i+']'; 
 
    var id = 'saj' + i; 
 
    var submit = '#sa' + i; 
 
    var extendedId = '#so' + i; 
 

 
    $(function() {   
 
     $(submit).click(function() { 
 
      $(extendedId).html('<span id = "'+id+'" class="stars">'+parseFloat($(val).val())+'</span>'); 
 
      $('#'+id).stars(); 
 
     });   
 
     $(submit).click(); 
 
    }); 
 
}

span.stars, span.stars span { 
 
    display: block; 
 
    background: url(stars.png) 0 -16px repeat-x; 
 
    width: 80px; 
 
    height: 16px; 
 
} 
 

 
span.stars span { 
 
    background-position: 0 0; 
 
} 
 

 
.sajed { 
 
    display :none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class = "sajed" type="text" name="amount1" value="2.5" /> 
 
<input id = "sa1" class = "sajed" type="submit" value="update"/> 
 
<p id = "so1" ><span >2.4618164</span></p> 
 

 
<input class = "sajed" type="text" name="amount2" value="4" /> 
 
<input id = "sa2" class = "sajed" type="submit" value="update"/> 
 
<p id = "so2"><span >2.4618164</span></p>

私は私が（別のクラス名を持つ）HTML、CSSを繰り返した場合、それが働いて、それを数回を追加するために必要な、インターネットからこのコードを持って、そしてjQueryの機能。私がやりたいこと

は、私は星を要素に持つHTMLコードを数回追加し、それ

に同じCSSとjQueryを使用することです、私はforループ内で上記の関数を呼び出すだけLASTていますループ内の要素が効果を持ちます。

私は0から1までのループのために起動したときにちょうどFIRST星iは0から2までのループのために起動したとき、私は0から3までのループのために起動したときに形状 がちょうどSECOND星形 を得ました何も起こりません。

は私がその悪い、説明のために申し訳ありませんが、私はあなたが私は

ループは、インデックス1と第2の終了時に最初の1が発生しました結果を持っているコードと次の画像から何を意味するかだ願っていますそれは2で終了し、第三時に、それは2

Screen Shot

Answer 1

よりも大きなインデックスで終了したときにクリックハンドラのいずれかを実行する前に、あなたのループは、したがって、あなたの変数があなた与え、彼らの最終的な値に設定され、終了しますあなたが見る効果。

代わりvarのletを使用することによってこの問題を解決することができます：変数（id等）forループブロックにローカルになると、イベントハンドラ関数は、右のいずれかを参照しますそのように。

$.fn.starで修正する必要がある別のこと：jQueryプラグイン関数は、メソッドが適用されるjQueryコレクションにthisを設定します。つまり、すでにjQueryであることを意味します。thisを$(this)にラップしないでください。ちょうどthis.each(...)を実行してください。

Answer 2

実は、私はあなたのプラグインと同様for loopで.each()ループの必要がないと思います..あなたはこの

$.fn.stars = function() { 
 
    return //$(this).each(function() { 
 
     $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16)); 
 
    //}); 
 
} 
 
$(function() {   
 
    $('input[id^="sa"]').on('click',function(e) { 
 
     e.preventDefault(); 
 
     var ThisIt = $(this); 
 
     ThisIt.next('[id^="so"]').html('<span class="stars">'+parseFloat(ThisIt.prev('input[name^="amount"]').val())+'</span>'); 
 
     ThisIt.next('[id^="so"]').find(' > span').stars(); 
 
    }).click(); 
 
});

span.stars, span.stars span { 
 
    display: block; 
 
    background: url(http://placehold.it/350x150) 0 -16px repeat-x; 
 
    width: 80px; 
 
    height: 16px; 
 
} 
 

 
span.stars span { 
 
    background-position: 0 0; 
 
} 
 

 
.sajed { 
 
    /*display :none;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class = "sajed" type="text" name="amount1" value="2.5" /> 
 
<input id = "sa1" class = "sajed" type="submit" value="update"/> 
 
<p id = "so1" ><span >2.4618164</span></p> 
 

 
<input class = "sajed" type="text" name="amount2" value="4" /> 
 
<input id = "sa2" class = "sajed" type="submit" value="update"/> 
 
<p id = "so2"><span >2.4618164</span></p>