Q&A
HTMLコードを質問に追記してください。
liタグ内のaタグをホバーした際、それぞれの処理を行うようなjqueryを記載しました。もっとスマートな書き方はありますでしょうか？
例えば、ループの処理を追加して○○番目を変数で記載し、関数自体を１つにまとめたりできないでしょうか？
下記では、liタグ内のaタグをホバーした際に「.top_image」の画像を差し替えるような処理を作っています。
liタグの1つめの要素だとimage01の画像を表示、
liタグの2つめの要素だとimage02の画像を表示…
といったようにliタグの数だけそれぞれの画像を表示するようにしています。
現在作成しているHTML・JavaScript
html
1<html> 2 <body> 3 <div class="top_image"> 4 <figure> 5 <!-- ここの画像をホバーによって変える --> 6 <img src="../image_00.jpg" alt="イメージ画像" flag="1" class="image00" style=""> 7 </figure> 8 </div> 9 <div class="list"> 10 <!-- ここのaタグのホバーで画像の変更を行う --> 11 <ul> 12 <li><a href="@@@"><img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style=""></a></li> 13 <li><a href="@@@"><img src="../image_02.jpg" alt="イメージ画像" flag="1" class="image02" style=""></a></li> 14 <li><a href="@@@"><img src="../image_03.jpg" alt="イメージ画像" flag="1" class="image03" style=""></a></li> 15 <li><a href="@@@"><img src="../image_04.jpg" alt="イメージ画像" flag="1" class="image04" style=""></a></li> 16 </ul> 17 </div> 18 19 <!-- ここのホバーで表示する画像を非表示にして設定している --> 20 <div style="display:none;"> 21 <img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style=""> 22 <img src="../image_02.jpg" alt="イメージ画像" flag="1" class="image02" style=""> 23 <img src="../image_03.jpg" alt="イメージ画像" flag="1" class="image03" style=""> 24 <img src="../image_04.jpg" alt="イメージ画像" flag="1" class="image04" style=""> 25 </div> 26 </body> 27</html>
JavaScript
1$(function() { 2 // ホバーで画像を変更する 3 $('.list li:eq(0) a').hover( 4 function() { 5 $(".top_image img").remove(); 6 $('.image01').clone(true).appendTo('.top_image figure').hide().fadeIn(400); 7 }, 8 function() { 9 reset_image(); // 画像を戻す処理 10 } 11 ); 12 $('.list li:eq(1) a').hover( 13 function() { 14 $(".top_image img").remove(); 15 $('.image02').clone(true).appendTo('.top_image figure').hide().fadeIn(400); 16 }, 17 function() { 18 reset_image(); // 画像を戻す処理 19 } 20 ); 21 $('.list li:eq(2) a').hover( 22 function() { 23 $(".top_image img").remove(); 24 $('.image03').clone(true).appendTo('.top_image figure').hide().fadeIn(400); 25 }, function() { 26 reset_image(); // 画像を戻す処理 27 } 28 ); 29 $('.list li:eq(3) a').hover( 30 function() { 31 $(".top_image img").remove(); 32 $('.image04').clone(true).appendTo('.top_image figure').hide().fadeIn(400); 33 }, 34 function() { 35 reset_image(); // 画像を戻す処理 36 } 37 ); 38 39 40 // 画像を元に戻す 41 function reset_image () { 42 $(".top_image img").remove(); 43 $('.image00').clone(true).appendTo('.top_image figure').hide().fadeIn(400); 44 } 45 46});
現時点では要素が増えるとJavaScriptを書き換える必要があるため、
ループ等で要素分の関数を記載できたらと考えています。
ループでまとめるような書き方はできるのでしょうか？
アドバイスいただければと思います。よろしくお願いいたします。
回答1件
0
ベストアンサー
HTMLがないので推測ですが、下記のような感じでどうでしょうか。
js
1$(function () { 2 // ホバーで画像を変更する 3 $('.list li a').hover( 4 function () { 5 $(".top_image img").remove(); 6 const x = ($('.list li a').index(this) + 1).toString().padStart(2, '0'); 7 $(`.image${x}`).clone(true).appendTo('.top_image figure').hide().fadeIn(400); 8 }, 9 function () { 10 reset_image(); // 画像を戻す処理 11 } 12 ); 13});
$('.image01') の数値部分がだけが違うようなので、index()で何番目の要素がクリックされたかを取得して、それを利用する。
HTMLが追記されましたので、それを見てみると、
同じ画像を非表示にして後に配置してますが、それは必要ですか。
クラス名も同じなので、同じ画像が２つ追加されることになると思います。
あと、提示されたHTMLには listクラスは存在しませんし、reset_image() のコードも提示されていないので、こちらで検証することができません。
よって、正確な回答は難しい状況です。
投稿2021/04/06 05:15
編集2021/04/06 06:15総合スコア34084
回答ありがとうございます。
＞同じ画像を非表示にして後に配置してますが、それは必要ですか。
＞クラス名も同じなので、同じ画像が２つ追加されることになると思います。
こちらは必要なものとなります。
htmlを直接記載してWEBページを作成しているのではなく、CMSを利用して実装するため、CMSの都合により、非表示している画像をもとに、top_imageクラス配下の画像を変更するようにしています。
＞あと、提示されたHTMLには listクラスは存在しませんし、reset_image() のコードも提示されていないので、こちらで検証することができません。
＞よって、正確な回答は難しい状況です。
上記の件ですが、記入が漏れておりましたので追加を行っております。失礼いたしました。
.index(this)で何番目かを取得することができるのですね。
さらにpadStartで0埋めも行えるのですね。初めて知りました。
画像のファイル名はimage○○のように設定しているのでこれで対応ができ、実装しましたが望むように動作しました。
ありがとうございます！
あなたの回答
tips
プレビュー
