javascript、jqueryにて配列を作り、その中のクリックしたものを取得しクラスの付与をしたいです。

Question

<div>
                  <img class="none_img" src="images/a.png" <!--これにclass="none"を与えたい-->>
                  <img src="images/a_2.png" <!--上のimgにnone"を与えた後重なってるこれが見える-->>
                </div>
　　　　　　　　　　<div>
                  <img class="none_img" src="images/b.png" <!--これにclass="none"を与えたい-->>
                  <img src="images/b_2.png" <!--上のimgにnone"を与えた後重なってるこれが見える-->>
                </div>
　　　　　　　　　　<div>
                  <img class="none_img" src="images/c.png" <!--これにclass="none"を与えたい-->>
                  <img src="images/c_2.png" <!--上のimgにnone"を与えた後重なってるこれが見える-->>
                </div>

$(function(){

var none = $("img_none");

    for(var i = 0; i < img_none.length; i++){
      img_none[i].addEventListener("click",none);
    }

    function none(){
      var click_none = Array.prototype.slice.call(none);
      var index_none = click_none.indexOf(this);
　　　　↓ここからの記述がわからないです・・・

    }

  });

none_imgを配列化しクリックしたもの(this)にたいしclass="none"を与えてnoneにしたい流れです
配列とこういったクリックイベントを併用するのが今自分の最難関で大変困ってます
アドバイスをいただきたいです
よろしくお願いします

img_none[i].addEventListener("click",none);が
Uncaught ReferenceError: icon_none is not definedというエラーが出ていて解決策もわからない状態です。
スペルミスはないと思うのですが...

Answer 1

プログラムは書いた通りにしか動かないので、当然、書いた通りに動いています。

• $("img_none")というセレクタの指定の仕方だと「img_noneというタグ」を指定しています。セレクタの基本をおさえてください。

セレクタの指定が違えばそれも含めて「スペルミス」と言えます。

• img_noneという変数はどこにも定義されていません。定義されていない変数を利用するのもある意味「スペルミス」と言えます。

定義したものをコピペすれば避けられる話です。

• 　　　　↓ここからの記述がわからないです・・・ ←実際にこのままコード内に書いてあるなら動かないのは当然ですが、せめてコメントアウトしてください。
• ご自身はこのコードをどこまで把握しているのでしょうか。
• jQueryでクラスを指定するなら配列回してaddEventするのではなくjQueryで$('セレクタ').on('イベント',function(){/*処理*/})で良いのでは？

混ざっていると実装のブレが出てよろしくありません。

• つまり「クラスを付与する」もjQueryの記法でやるべきです

Comments

[ShojiroAbe]

参考にさせていただきました！
無事やりたいことができましたありがとうございます！

[m.ts10806]

もう少し具体的に「どう解決したか」フィードバックいただけると。
https://teratail.com/help/question-tips#questionTips4-2

Answer 2

Uncaught ReferenceError: icon_none is not definedというエラーが出ていて解決策もわからない状態です。

スペルミスはないと思うのですが...

スペルミスでないとしたら、icon_noneというのがどこで定義されているのか教えて下さい。
あなたの貼っているコード上に見当たりません。

エスパー回答をするなら

var none = $("img_none");

for(var i = 0; i < img_none.length; i++){
img_none[i].addEventListener("click",none);
}

この一行目のnoneという変数を意図しているのかもしれませんが、これを3,4行目でimg_noneという名前で参照しようとして間違ってるんじゃないですかね。

この解釈があったら三重でスペルミスですけど。

Comments

[gentaro]

質問文の文中に

> none_imgを配列化しクリックしたもの(this)にたいしclass="none"を与えてnoneにしたい流れです

とあり、HTMLのクラス名はこの「none_img」っぽいので、四重でミスしてる気がしてきた。
さすがにここまでくると、何を確認して「スペルミスはない」と思ったのか疑問で仕方ないけど…。