多く<img>同じルーチンを使用しているID

Question

<img>の値をクリッカーのクリップボードにコピーし、その値がコピーされたことを通知するコードを用意しました。最終的には、<img>と多くの値（id="me_too"、id="me_too"、id="me_too"、...）をクリップボードにコピーして、基本的に同じルーチンを実行する必要があります。私はこれが配列やループを使用して可能だと思いますか？私はjQueryとプログラミングにはかなり新しいので、助けが非常に高く評価されるでしょう！

HTML：

<p><img id="smiley" value=":)" src="..." /> 
<p><img id="me_too" value=";)" src="..." /> 
<p><img id="and_me" value=":D" src="..." /> 
<p><img id="and_me_too" value=":X" src="..." /> 

<p id="info_satz">&nbsp;</p> 

のjQuery：

 jQuery('#smiley').on('click', function() { 
      var value = jQuery(this).attr('value'); 

      copyToClipboard(value); 
      jQuery('#info_satz').hide().html(value + ' copied to clipboard.').fadeIn('normal'); 
     }); 

     function copyToClipboard(value) { 
      var $tmpInput = $('<input>'); 
      $tmpInput.val(value); 
      jQuery('body').append($tmpInput); 
      $tmpInput.select(); 
      document.execCommand('copy'); 
      $tmpInput.remove(); 
     } 

Answer 1

ちょうどクラスを使用するのではなくIDの。

各画像にクラスを付けます。そのクラスを使用しているすべての画像要素を選択して、イベントリスナーの追加よりyourClass

<img id="smiley" class="yourClass" value=":)" src="..." />

：あなたのコードはすでにそれをクリックした要素に相対的である

jQuery('.yourClass').on('click', function(){ ... }

を（あなたが使用しているため値を選択するにはthisを入力してください）、残りは期待どおりに動作するはずです。

変更したコードの完全な例：

jQuery('.yourClass').on('click', function() { 
 
    var value = jQuery(this).attr('value'); 
 

 
    copyToClipboard(value); 
 
    jQuery('#info_satz').hide().html(value + ' copied to clipboard.').fadeIn('normal'); 
 
}); 
 

 
function copyToClipboard(value) { 
 
    var $tmpInput = $('<input>'); 
 
    $tmpInput.val(value); 
 
    jQuery('body').append($tmpInput); 
 
    $tmpInput.select(); 
 
    document.execCommand('copy'); 
 
    $tmpInput.remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <img id="smiley" class="yourClass" value=":)" src="..." /> 
 
</p> 
 
<p> 
 
    <img id="me_too" class="yourClass" value=";)" src="..." /> 
 
</p> 
 
<p> 
 
    <img id="and_me" class="yourClass" value=":D" src="..." /> 
 
</p> 
 
<p> 
 
    <img id="and_me_too" class="yourClass" value=":X" src="..." /> 
 
</p> 
 

 
<p id="info_satz">&nbsp;</p>