2

以下の<ul>ようなものがあります。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

その隣には、画像を含む別のリストを含む DIV があります。以下のように;

<ul>
  <li><img src="example1.png" alt="" /></li>
  <li><img src="example2.png" alt="" /></li>
  <li><img src="example3.png" alt="" /></li>
  <li><img src="example4.png" alt="" /></li>
</ul>

技術的に私がやろうとしている<li>のは、最初のリストにカーソルを合わせると、2番目のリストから正しいものが表示されるということ<li>です。

私の推測では、 の量を数えて<li>、現在ホバリングされているものの数を取得することでした。次に、2 番目についても同じことを行い、同じ番号で<ul>を表示します。<li>

それは可能ですか？

4

3 に答える 3

2

ひやは小さなショーを作り、あなたのためにデモを非表示にしました http://jsfiddle.net/KAJsF/

これが役に立ったら教えてください、素敵なものを持ってください、乾杯！

Jqueryコード http://jsfiddle.net/KAJsF/

$(document).ready(function(){
    $("ul li").hover(function(){
        var showcalss = $(this).attr("class");
        $("."+showcalss+"img").show();
    });
       $("ul li").mouseout(function(){
        var showcalss = $(this).attr("class");
        $("."+showcalss+"img").hide();
    });
});​

html

<ul>
  <li class="1">Item 1</li>
  <li class="2">Item 2</li>
  <li class="3">Item 3</li>
  <li class="4">Item 4</li>
</ul>

<ul>
  <li style="display:none" class="1img"><img src="example1.png" alt="" />SHOW 1</li>
  <li style="display:none" class="2img"><img src="example2.png" alt="" />SHOW 2</li>
  <li style="display:none" class="3img"><img src="example3.png" alt="" />SHOW 3</li>
  <li style="display:none" class="4img"><img src="example4.png" alt="" />SHOW 4</li>
</ul>​
于 2012-04-17T10:58:24.450 に答える
1

FIDDLED: http://jsfiddle.net/GTM3X/1/

それは派手ではありませんが、あなたが望むことをします。それが役立つかどうか教えてください。

編集:簡単にアクセスできるように、ここにコードを追加します。

$('.one li').hover( function() {
    var x = $(this).index();
    $('.two li').hide().each( function(i, v) {
        if (i == x) {
            $(this).show();   
        }
    });
});​
于 2012-04-17T10:56:01.763 に答える
0

この例を参照してください http://jsfiddle.net/vtENY/3/ コードは自明です:)

HTML マークアップを変更する必要はありません... LI インデックスで十分です :)

マウスが最初のリストの LI のいずれにもない場合は、2 番目のリストのすべての LI を非表示にしたいと思うかもしれません...このコードはうまくいきます。お知らせ下さい...

// hide all LI in the "two" UL
$("ul#two li").hide();

// listen for hover/unhover event
$("ul#one li").hover(function(){

    // find the index of the LI to be displayed
    var index = $(this).index();

    // show new active element
    $("ul#two li").eq(index).addClass("active").show();
},function(){
    // hide prev active element
    $("ul#two li.active").removeClass("active").hide();
})
于 2012-04-17T11:20:39.890 に答える