Question

当我将鼠标悬停在不相关的元素上时，我试图让元素显示（或消失）。

目前我正在尝试使用列表和索引来执行此操作，以便当列表1中的第n个项目悬停时列表2中的第n个项目发生更改。这将为许多对象提供一般解决方案，而不是将所有元素配对并为每个对象编写jQuery规则。我看过其他讨论，但似乎没有一个通用的解决方案。

下面是我试过的一些玩具代码。

我是jQuery的新手，所以感谢您的耐心等待。

<!doctype html>
<html>
    <head>
        <title>addClass demo</title>
<style>
.disappear { display: none }
</style>
<script src="jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <ul>
            <li class = "one">Hello</li>
            <li class = "one">and</li>
            <li class = "one">Goodbye</li>
        </ul>
        <ul>
            <li class = "two">Hello</li>
            <li class = "two">and</li>
            <li class = "two">Goodbye</li>
        </ul>
<script>
$( "li one" ).on('mouseenter', function() {
 var indx = $(this).eq();
 $("li two").eq(indx).addClass("disapear");
}); 
$( "li" ).on('mouseleave', function() {
 $(this).removeClass("disappear");
}); 
</script>
    </body>
</html>

Answer 1

问题

你有错误的课程。其disappear代替disapear
使用$("li.one")代替$( "li one" )和$("li.two")代替$( "li two" )
使用index()代替eq()
使用.hover()，我推荐

代码

$("li.one").hover(function () {
    var indx = $(this).index();
    $("li.two").eq(indx).addClass("disappear");
}, function () {
    var indx = $(this).index();
    $("li.two").eq(indx).removeClass("disappear");
});

DEMO

Answer 2

eq()不会告诉您当前元素的索引（请参阅http://api.jquery.com/eq/）。事实上，没有定义没有参数的行为。

你需要index()，所以：

var indx = $(this).index();
$("li.two").eq(indx).addClass("disappear");

请注意，原始代码在一个但不是两个案例中都有disapear的拼写错误：disappear。

此外，您希望"li.one"和"li.two"选择包含这些类的元素，而不是"li one" - 点是类选择器。

您可以考虑将该课程改为<ul>，并执行"ul.one li"

悬停使用jQuery更改无关元素的样式

2 个答案: