Q&A
> もっといい回答がつくことを願いつつ
変数に逃がす手法が一番だと思います。
jquery初学者です。
jqueryで例えば以下のようなコードがあったとき、二つ目の関数内で一つ目のセレクタ(this)を使いたいときはどうすればいいですか？
$('.quiz_area').on('click', '.quiz_ans_area ul li', function(){ $('.quiz_area').on('click', '.quiz_question_area ul li', function(){ // $(this).css('background-color','orange'); // ※ここの$(this)をひとつ前の$(this)を指定するようにしたい }); });
回答5件
0
既に複数良い回答があるので、ちょっとズレるかもしれませんが、thisよりEvent.currentTarget使った方がより確実に「この要素」を見れると思います。
thisって結構いろんな役割を担ってるので、試されたかもしれませんが場面によって内容や役割が変わってきます。
「thisを使ったとしても迷わず要素を操作できるHTML構成やロジック」を考えるべきと思います。場合によってはHTMLから見直すべきです。
クリックの中にクリックがあるのも実装としてはよろしくないです。
未検証ですが、こんな風にわけるとか
js
1let ans_current= null; 2$('.quiz_area').on('click', '.quiz_ans_area ul li', function(e){ 3 ans_current = currentTarget.currentTarget; 4}); 5 6$('.quiz_area').on('click', '.quiz_question_area ul li', function(){ 7 if(ans_current != null){ 8 $(ans_current ).css('background-color','orange'); 9 ans_current= null; 10 } 11}); 12
HTML構成次第で変わってくると思います。
要素のインデックス番号なども取れるようにした方がいいかもしれない（data属性で紐づけるのもあり）
currentTarget使ったやり方書いてなかった
js
1let ans_current= null; 2$('.quiz_area').on('click', '.quiz_ans_area ul li', function(e){ 3 ans_current = e.currentTarget; 4}); 5 6$('.quiz_area').on('click', '.quiz_question_area ul li', function(){ 7 if(ans_current != null){ 8 $(ans_current).css('background-color','orange'); 9 ans_current= null; 10 } 11}); 12
投稿2021/03/07 08:43
編集2021/03/07 10:47
総合スコア80875
0
クリックするたびに別のHTML要素にイベントを付加するのは
繰り返し付加されてしまうのでよいフロートは言い難いです
投稿2021/03/07 03:53
総合スコア116694
0
questionの中でansのthisを使うという質問になるのかな？
ansの直下でlet ansThis = $(this);として、
questionの中ではansThisで指定すれば動きそうな気はするけど…
１つ目の関数のthisを変数に代入し、２つ目の関数に渡す。
javascript
1$('.quiz_area').on('click', '.quiz_ans_area ul li', function(){ 2 let ansThis = $(this); 3 $('.quiz_area').on('click', '.quiz_question_area ul li', function(){ 4 // $(this).css('background-color','orange'); 5 // ※ここの$(this)をひとつ前の$(this)を指定するようにしたい 6 ansThis.css('background-color','orange'); 7 }); 8});
もっといい回答がつくことを願いつつ、ちょっと検証してみますね。
追記
一応問題を選択した後に回答をクリックすると問題の背景が変わりました。
投稿2021/03/07 02:18
編集2021/03/07 02:30
退会済みユーザー
総合スコア0
> 変数に逃がす手法が一番だと思います。
ありがとうございます！
0
改善コード
まず、質問文のコードを素直に改善したコードを掲示します。
HTML
1<style> 2 .mark { 3 background-color: orange; 4 } 5</style> 6<body> 7<div class="quiz_area"> 8 <div class="quiz_question_area"> 9 <ul> 10 <li>質問1</li> 11 <li>質問2</li> 12 <li>質問3</li> 13 <li>質問4</li> 14 <li>質問5</li> 15 </ul> 16 </div> 17 <div class="quiz_ans_area"> 18 <ul> 19 <li>答え1 (count=<span class="count">0</span>)</li> 20 <li>答え2 (count=<span class="count">0</span>)</li> 21 <li>答え3 (count=<span class="count">0</span>)</li> 22 <li>答え4 (count=<span class="count">0</span>)</li> 23 <li>答え5 (count=<span class="count">0</span>)</li> 24 </ul> 25 </div> 26</div> 27<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 28<script> 29'use strict'; 30{ 31 const handleClick2 = function handleClick2 (event) { 32 jQuery(event.data).addClass('mark'); 33 34 const counter = event.data.querySelector('.count'); 35 counter.textContent = Number(counter.textContent) + 1; 36 }; 37 38 jQuery('.quiz_area').on('click', '.quiz_ans_area ul li', function (event) { 39 jQuery('.quiz_area').on('click', '.quiz_question_area ul li', this, handleClick2); 40 }); 41} 42</script>
主な変更点は2点です。
.css()を.addClass()に変更。人間の目に要素に割り当てられた属性が明らかになり、後でclass="mark"のスタイルを変更する時にJavaScriptコードに手を入れる必要がなくなります。event.dataの採用。関数式を入れ子にした場合、始めのclickイベントが発火する度に新しく関数を生成する為、メモリの無駄遣いになります。
考察
先程のコードは動作確認コードも仕込んでありますので、jsfiddleにあげたデモを元に考察します。
次の手順を上から順番に実行しました。
- 「答え1」を1回クリック -> 「質問2」を1回クリック -> 「答え1」がオレンジになり、count=1になる
- 「答え2」を3回クリック -> 「質問1」を1回クリック -> 「答え3」がオレンジになり、count=3になる。「答え1」がcount=2になる。
手順1によって、答えと対応しない質問をクリックしても答えがオレンジに変化する事が分かります。
手順2によって、答えをクリックした回数だけ質問をクリックした時に発火することがわかりますが、背景色をオレンジにするだけなら発火は一回だけでよく、1度発火したら二度目の発火は不要です。
もしも、「質問に対応するNo.の答えをオレンジに着色すること」が目的なら、data-index 属性にインデックス値を用意しておいて、対応する質問に対応する答えを参照する方法が考えられます。
Re: takumaa さん
投稿2021/03/07 12:16
総合スコア18189
data-*属性は @m.ts10806 さんが指摘済でしたね…。
私の主眼は「そのコードが本当に期待する動作になっているのか確認したほうがいいのでは、というものです。
「質問1をクリックしたら、答え1をオレンジに着色 -> 以降、発火しない」が期待する動作ではないかと想像しました。
0
ベストアンサー
JavaScriptのthisは非常に厄介な仕様ですので、質問のことをやりたい場合、一工夫必要です。
thisを変数に逃がす方法
javascript
1$('.quiz_area').on('click', '.quiz_ans_area ul li', function(){ 2 // thisを変数に逃がす 3 const parent = this; 4$('.quiz_area').on('click', '.quiz_question_area ul li', function(){ 5 // parentに、上記のthisが入っている 6 $(parent).css('background-color','orange'); 7 // ここでのthisは、'.quiz_question_area ul li' 8 }); 9});
アロー関数を使い、thisを定義時のものに束縛する方法
javascript
1$('.quiz_area').on('click', '.quiz_ans_area ul li', function(){ 2$('.quiz_area').on('click', '.quiz_question_area ul li', () => { 3 $(this).css('background-color','orange'); 4 // ただし、ここではthisでは、'.quiz_question_area ul li'を参照できない 5 }); 6});
他にもいろいろ手法があるかと思います。
投稿2021/03/07 02:19
総合スコア9555
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。