Question

首先：我刚刚开始使用JS / Jquery。所以请原谅任何潜在的新秀错误。现在问题。

我有一个项目（a），隐藏item(hidden_a).当我将鼠标悬停在item(a) item(hidden_a)上时显示。到目前为止这么容易。但现在我在页面上有几个这样的项目（例如：10）。现在的问题是：如何在不为10个不同的选择器编写相同的片段10次的情况下将我的jquery片段更改为成功。或者这甚至可能吗？

谢谢

这里是代码：

 <ul >
            <li class="trigger"><a href="" >Item 1</a></li>
            <li class="trigger"><a href=""  >Item 2</a></li>

        </ul>

        <ul>
            <li style="display:none" class="target">
                <p >Hidden Item to Item 1</p>
            </li>
            <li  style="display:none" class="target">
                <p>Hidden Item to Item 2</p>
            </li>
        </ul>

<script>

$(".target").hide();
$(".trigger").hover(function(){
   $(".target").show();
},function(){
   $(".target").hide();
});

</script>

Answer 1

尝试为外部元素（在您的情况下为a）添加一个名为outer的类，并为内部元素添加inner。

$(".outer").hover(function()
{
    //alert( $(this).find(".inner").show());
    $(this).find(".inner").show()
});

$(".outer").mouseleave(function()
{
    $(this).find(".inner").hide();
});

确保 .inner元素的初始状态为display: none。

以下是示例：http://jsfiddle.net/82weU/2/

Answer 2

您可以在每个trigger及其对应的target周围使用包装器。然后，您可以在此包装器中查找相应的目标。

如果您无法更改html结构，则可以使用.index() https://api.jquery.com/index/和.eq() https://api.jquery.com/eq/：查找悬停触发器的索引及其帮助相应的目标。

示例代码：

var $triggers = $(".trigger");
var $targets = $(".target").hide();

$triggers.hover(function(){
    var $currentTrigger = $(this);
    var indexOfTrigger = $triggers.index();
    var $correspondingTarget = $targets.eq(indexOfTrigger);
    $correspondingTarget.show();
},function(){
    var $currentTrigger = $(this);
    var indexOfTrigger = $triggers.index();
    var $correspondingTarget = $targets.eq(indexOfTrigger);
    $correspondingTarget.hide();
});

Answer 3

我迟到了，但是另一个使用index（）和nth-child（）的解决方案，我认为它更接近你可能正在寻找的东西。也是小提琴http://jsfiddle.net/S4aa9/

$(".hidden li").hide();
$(".trigger li").mouseenter(function(){
    //gets the nth position of the li
    var pos = $(this).index()+1;    
    $('.hidden li:nth-child('+pos+')').show();  
});

$('.trigger li').mouseleave(function(){
    var pos = $(this).index()+1;    
    $('.hidden li:nth-child('+pos+')').hide();
});

Jquery悬停显示隐藏多个相关项目

3 个答案: