3

このような順序付けられていないリストがあります

HTML 

<div id="pop">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
     </ul>
</div>
<div id="info-1></div>
<div id="info-2></div>

アイテムの 1 つにカーソルを合わせると、そのアイテムに関する情報がウィンドウに表示されます。1 つの項目についてこれを解決しましたが、リスト全体でこれを機能させる方法を知りたいと思います。

私の最初の考えは、各項目ごとに 1 つのスクリプトを作成することでした...しかし、js の機能を考慮すると、それは少し厚いようです。

Javascript

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

私の質問はもちろん、このスクリプトをすべてのアイテムで機能させるにはどうすればよいかということです。

4

5 に答える 5

10

私はお勧めします：

$('#pop li').hover(
    function() {
        $('div.info').eq($(this).index()).show();
    }, function() {
        $('div.info').eq($(this).index()).hide();
    });​

わずかに変更された HTML の操作:

<div id="pop">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</div>

<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>​

JS フィドルのデモ。

私が言い忘れていたのは、これは現在ホバーされている.info要素と同じ要素に対応する要素を表示するので、最初にホバーすると最初のが表示されるということです。したがって、要素と要素の間の予測可能な関係を維持することに依存しています。indexli li.infoli.info

余談ですが、ホバー イベントではなくクリックが必要ですが、CSS だけを使用してこのインタラクションを複製することは可能です。liiddiv

<div id="pop">
    <ul>
        <li><a href="#info1">Item 1</a></li>
        <li><a href="#info2">Item 2</a></li>
        <li><a href="#info3">Item 3</a></li>
        <li><a href="#info4">Item 4</a></li>
        <li><a href="#info5">Item 5</a></li>
        <li><a href="#info6">Item 6</a></li>
        <li><a href="#info7">Item 7</a></li>
    </ul>
</div>

<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>​

そしてCSS：

.info {
    /* hides by default */
    display: none;
}

.info:target {
    /* shows when targeted */
    display: block;
}

JS フィドルのデモ。</p>

ちなみに、属性の引用はオプションですが (空白を含む属性の場合は引用する必要があります)、引用する場合は、引用する値の両端に引用符を付ける必要があります:は有効な HTMLではありません(文字列は、次の属性の先頭の次の行まで閉じられません); 使用: 。<div id="info-1></div><div id="info-1"></div>

さらに、投稿された jQuery:

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

次の理由により、これは機能しません。

  1. セレクターはどの要素にも一致しません。a要素内の要素をターゲットにしようとしていますpop(明らかに存在しません)。あなたがする必要があるのは、をida#で始めることです (次の行で行うように、そこでタイプミスを想定しています) $('#pop a')。しかし、
  2. a要素には要素がない#popため、バインドされるイベントはありません。

ただし、そのフォームを使用する必要がある場合は、いくつかの調整を行うことで機能させることができます。

$(function(){
     $('#pop li').hover(function(){
          $('#info-' + $(this).text().match(/(\d+)/)).show();
     },function(){
          $('#info-' + $(this).text().match(/(\d+)/)).hide();
     });
});

JS フィドルのデモ。

参考文献:

于 2012-11-24T20:33:07.947 に答える
3

これを試して ：

$(function(){
  $('#pop li').hover(function(){
     $('#info-'+$(this).index()+1).show();
  },function(){
     $('#info-'+$(this).index()+1).hide();
  });
});
于 2012-11-24T20:33:03.843 に答える
2

pop要素内のすべてのタグにホバーイベントをバインドしましたa（構文エラーがありますが、要素をIDでアドレス指定するときは常に「#」を追加する必要があります）が、探しているものがありません：

$('#pop li').hover(function() {

});
于 2012-11-24T20:32:53.593 に答える
2

ここにサンプルがありますhttp://fiddle.jshell.net/7QmR5/

HTML:

<div id="pop">
    <ul>
        <li id="li1">Item 1</li>
        <li id="li2">Item 2</li>
        <li id="li3">Item 3</li>
    </ul>
</div>

<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>

JavaScript:

$(function(){
    $('#pop li').hover(function(){
        $('#info-' + $(this).attr('id').replace('li','')).show();
    },function(){
        $('#info-' + $(this).attr('id').replace('li','')).hide();
    });
});​
于 2012-11-24T20:39:38.773 に答える
1

もっと簡単な解決策があります：

CSS

#info-1{
    display:none;
}
ul > li:hover #info-1 {
    display:block;
}

li 要素に id を指定すると、疑似を使用したくない場合を除き、CSS を使用してそれらを選択しやすくなります。

または、必要に応じて jQuery を使用します。

$('li:eq[0]','#pop').hover(function(){
    $('info-1').show();
});
于 2012-11-24T20:36:59.883 に答える