Question

我有<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>时，它会从第二个列表中显示正确的<li>。

我的猜测是计算<li>的数量并获取当前悬停的数量。然后对第二个<ul>执行相同操作，并使用相同的数字显示<li>。

这可能吗？

Answer 1

Hiya为您制作了一个小节目并隐藏演示演示 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>

Answer 2

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();   
        }
    });
});

Answer 3

查看示例 http://jsfiddle.net/vtENY/3/ 代码是自我解释：）

无需更改html标记...... LI索引就足够了：）

我想如果鼠标没有超过第一个列表中的任何LI，你可能想要隐藏第二个列表中的所有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();
})

jQuery统计UL内部的LI元素并获取当前悬停的数量

3 个答案: