javascript - jQueryで複数の画像に関数を適用するにはどうすればよいですか?

Question

（おそらく）本当に単純なことで少し助けが必要です。

画像をカラーからグレースケールに変換するスクリプトを使用したいと考えています。最初の画像は灰色に変わりますが、2 番目の画像は変わりません。

これは、IDを複数回使用できないためです。

var imgObj = document.getElementById('grayimage');

私はこれを試しました：

var imgObj = $(’.grayimage’)[0];

しかし、うまくいきませんでした。に変更してgetElementByClassも機能しません。(人々が尋ねる前に、タグのidto クラスを変更しました。)<img>

私は本当にここでいくつかの助けを借りることができました. 前もって感謝します！

Answer 1

$('.grayimage') は、クラスとしてグレーイメージを持つすべての要素のリストを提供します。'[0]' を追加すると、最初の要素にアクセスすることになるため、行った変更は、このクラスで検出された最初の画像にのみ適用されます。

すべての要素をループする必要があります。

var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
   var image = images[i];

   // Do stuff
}

Answer 2

$('.grayimage').each(function(idx,imgObj){
    <do your code here>
});