ループ処理の原理がわからない

Question

それぞれのラベルをクリックした際にテキストを変更するスクリプトを作ろうと思ってい調べたところ以下のコードで実現できたのですが、ループの中の.on("click", { value: i + 1 }, onClick)の部分がどういう意味なのかと、途中で出てくるe.data.valueの部分が何を表しているのかが調べてもイマイチわかりませんでした。
どういう原理で動いているのか詳しく理解したく思い質問させていただきました。
ご教授していただけると助かります。

  <p>色を選択してください<span class="color-text">カラー</span></p>
<div class="color">
<input type="radio" id="check-color1" name="check-color" />
<label class="check-color-item" for="check-color1"></label>

<input type="radio" id="check-color2" name="check-color"/>
<label class="check-color-item" for="check-color2"></label>

<input type="radio" id="check-color3" name="check-color"/>
<label class="check-color-item" for="check-color3"></label>

<input type="radio" id="check-color4" name="check-color"/>
<label class="check-color-item" for="check-color4"></label>
</div>

for (var i = 0; i < 4; i++) {
  $(".check-color-item").eq(i).on("click", { value: i + 1 }, onClick);
}
function onClick(e) {
  if(e.data.value == 1){
  $(".color-text").text('b');
} else if(e.data.value == 2){
  $(".color-text").text('r');
}else if(e.data.value == 3){
  $(".color-text").text('g');
}else if(e.data.value == 4){
  $(".color-text").text('y');
}
}

Comments

[H40831]

jQueryタグの追加をオススメします。

[kyoya0819]

少なくとも当方の環境では動作しませんでした。
https://codepen.io/asuchi0819/pen/KKKJbbW?editors=1010

[m.ts10806]

「何を表しているか調べた」とはどのようにしたのでしょうか。

[m.ts10806]

「どういう原理」だけだと極論「書いた通りに動いている」と返されます。自身が理解したこと把握していることを具体的に書かれた方がよいかと思います

[退会済みユーザー]

> 「どういう原理」だけだと極論「書いた通りに動いている」と返されます。

おす！　そうじゃなかったみてぇだな。

Answer 1

おす！

あのな、

$(selector).eq(position);
$(selector).on(event, data, function);

は両方とも、JavaScript 製ライブラリの jQuery が提供している API だ。

$(selector)

は selector で示してある ID や class とかの要素の操作を行うことを jQuery に明示するんだ。

$(selector).eq(position);

は、上で書いた明示された要素の内、ページ記述の一番上から数えて position 番目の要素の操作を行う事を jQuery に明示してんだ。

$(selector).on(event, data, callback);

は、上で書いた明示された要素について、event イベントが発生した場合に処理を行う callback 関数を jQuery に明示してんだ。
その際に、callback 関数に data を引数として渡す、って意味だ。

つまり、for 文で 0 から 3 までの整数を順番に生成しながら、
check-color-item ってぇクラスを持つ DOM 要素について、
click イベントが発生した場合に処理を任せるコールバックとして onClick() って名の関数を登録、その関数を呼ぶ際には value ってぇキーについて値がさっき生成された整数+1 を持ったオブジェクトを、大本になる event イベントオブジェクトの data って名のキーに設定して、onClick()関数に引数として渡してくれ、って jQuery に教えてるわけだ。

この $(selector).on() はあくまでも、上に書いた処理の定義を登録するだけで、この時点では何もおきねぇ。

そんでよぅ、実際に selector がクリックされた時、つまり、check-color-item ってぇクラスを持つ DOM 要素がクリックされた時に、onClick(e) 関数が呼ばれるんだが、 e にはクリックイベントオブジェクトが渡されてきて、その中の data ってキーには、さっき登録した { value: i + 1 } が設定されてる。
つまり、ドキュメントの上の方から数えて最初の要素のときは e.data.value = 1 が設定されてるし、
その次は e.data.value = 2 だし…ってぇ感じだ。

あとは、その値を if 文で調べて処理を分岐させてるだけだぞ。

Comments

[masaru_666]

順を追っての説明していただき大変わかりやすかったです。
ありがとうございます。

Answer 2

• .on() | jQuery 1.9 日本語リファレンス | js STUDIO

onの中でオブジェクト{}を指定すると、イベントにデータをマッピングできます
見た感じ単にそれをやりたいだけのソースに見えますね
e.dataの参照はよほどの指示がないかぎりおそらくめったに使わない機能の一つです

sample

一応元のソースがひどいのでjQueryらしく書くとこんな感じ？

$(function(){
  $(".check-color-item").on("click",function(e){
    var datas={1:"b",2:"r",3:"g",4:"y"};
    var idx=$(".check-color-item").index(this);
    e.data={value:1+idx};
    console.log(e.data);
    $(".color-text").text(datas[e.data.value]);
  });
});

でも、わざわざイベントのdataを介入しなくてもインデックスを利用して
直接参照させればいいので、こうした方が楽

$(function(){
  $(".check-color-item").on("click",function(e){
    var datas=["b","r","g","y"];
    var idx=$(".check-color-item").index(this);
    $(".color-text").text(datas[idx]);
  });
});

Comments

[masaru_666]

説明に加えてソースコードの訂正でより簡潔な書き方の参考になりました。
ありがとうございます。