gpt4 book ai didi

jquery - 悬停使用 jQuery 更改不相关元素的样式

转载 作者:可可西里 更新时间:2023-11-01 13:11:25 25 4
gpt4 key购买 nike

当我将鼠标悬停在一个不相关的元素上时,我试图让一个元素出现(或消失)。

目前我正在尝试使用列表和索引来做到这一点,这样当列表 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>

最佳答案

问题

  1. 你拼错了class。它的 disappear 而不是 disapear
  2. 使用 $("li.one") 而不是 $( "li one")$("li.two") 而不是 $( "li two")
  3. 使用 index() 代替 eq()
  4. 使用.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

关于jquery - 悬停使用 jQuery 更改不相关元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20661546/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com