jQueryのhoverでマウスを載せた際の要素が何番目から取得し、その要素に対する画像を表示させたいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
jQueryのhoverでマウスを載せた際の要素が何番目から取得し、その要素に対する画像を表示させたいです。
表示にはマウスを載せた時、離した時に
jQueryでcssを display: block , display: none で切り替えて表現したいです。

発生している問題・エラーメッセージ

thisとfindを使って要素を取得するようなのですが、それぞれの取得の仕方と
マウスを載せた際の要素のインデックスと画像の要素のインデックスの紐付け方がわかりません。
下記だと画像全てが表示、非表示されてしまいます。

HTML
1    <div class="store">
2      <ul class="store_contents">
3        <div class="store_left">
4          <img src="img/image1.jpg" class="store_img">
5          <img src="img/image2.jpg" class="store_img">
6          <img src="img/image3.jpg" class="store_img">
7        </div>
8
9        <div class="store_right">          
10          <dl class="store_top">
11            <a href="#">
12              <dt>KAMAKURA</dt>
13              <dd>Kanagawa</dd>
14            </a>
15          </dl>
16          <dl class="store_top">
17            <a href="#">
18              <dt>KAMAKURA HANARE HASE</dt>
19              <dd>Kanagawa</dd>
20            </a>
21          </dl>
22          <dl class="store_top">
23            <a href="#">
24              <dt>OFUNA</dt>
25              <dd>Kanagawa</dd>
26            </a>
27          </dl>
28        <div>
29      </ul>

CSS
1 .store_img {
2   display: none;
3 }

jQuery
1  $('.store_top').hover(
2    function() {
3      $('.store_img_top').css({ display: "block"})
4    },
5    function() {
6      $('.store_img_top').css({ display: "none"});
7    }
8  );

試したこと

それぞれに別クラスを振り、それに対する処理を記述していましたが、それだと一つ一つコードを記述していかないといけないため、カッコ悪いです。。
要素が増えても対応しやすいようにロジカルに書きたいです。

eneko0513

2020/06/01 14:23

<img src="img/image1.jpg" class="store_img"> と <dl class="store_top"> <a href="#"> <dt>KAMAKURA</dt> <dd>Kanagawa</dd> </a> </dl> が紐づくイメージですか？この並びがバラバラになるということはありますか。

mickey25

2020/06/01 16:06

質問の内容が分かりにくくてすみません。おっしゃる通りです。 <div class="store_left"> <img src="img/image1.jpg" class="store_img">  <img src="img/image2.jpg" class="store_img">  <img src="img/image3.jpg" class="store_img">  </div> <div class="store_right"> <dl class="store_top">  <a href="#"> <dt>KAMAKURA</dt> <dd>Kanagawa</dd> </a> </dl> <dl class="store_top">  <a href="#"> <dt>KAMAKURA</dt> <dd>Kanagawa</dd> </a> </dl> <dl class="store_top">  <a href="#"> <dt>KAMAKURA</dt> <dd>Kanagawa</dd> </a> </dl> ・・・ここのインデックス番号同士が紐づくイメージです。並びがバラバラになることは考えていません。回答ありがとうございました。他の回答者様にも回答いただきまして、解決しました！ありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じですか？

javascript
1$(function(){
2  $('.store_img').hide();
3  $('.store_top').hover(function(){
4    var idx=$('.store_top').index(this);
5    $('.store_img').eq(idx).show();
6  },function(){
7    $('.store_img').hide();
8  });
9});

投稿2020/06/01 14:51

yambejp

総合スコア116724

mickey25

2020/06/01 16:30

回答ありがとうございました！おかげでやりたいことが実現できました！回答をいただいたのに大変失礼ですが、 $('.store_img').hide(); とありますが、 [css] .store_img { display: none; } [jQuery] $('.store_top').hover(function(){ var idx=$('.store_top').index(this); $('.store_img').eq(idx).css({display: "block"}); },function(){ $('.store_img').css({display: "none"}); }); でも同じような挙動が確認できました。この場合は hide()を使用する場合と cssに display: none; を使用する場合ではソースコードが多くなり、 cssとjQueryにコードを記述しなければならない為、 hide()を使用するということでよろしいでしょうか？