gpt4 book ai didi

javascript - 如何用更少的行编写以下代码

转载 作者:太空宇宙 更新时间:2023-11-03 23:23:24 24 4
gpt4 key购买 nike

所以我有 2 <ul>与 3 <li>每个都有。我想更改指定 <li> 的颜色第二<ul>当我将鼠标悬停在指定的 <li> 上时第一<ul> .当我不悬停元素时,我希望格式恢复正常。这是我的代码:

<ul class="a">
<li class="a1"></li>
<li class="a2"></li>
<li class="a3"></li>
</ul>

<ul class="b">
<li class="b1"></li>
<li class="b2"></li>
<li class="b3"></li>
</ul>

<script>
$(document.ready(function() {
$(".a1").mouseover(function(){
$(".b1").css({"color":"red","font-size":"19px"});
});
$(".a1").mouseout(function(){
$(".b1").css({"color":"#045491","font-size":"16px"});
});
$(".a2").mouseover(function(){
$(".b2").css({"color":"red","font-size":"19px"});
});
$(".a2").mouseout(function(){
$(".b2").css({"color":"#045491","font-size":"16px"});
});
$(".a3").mouseover(function(){
$(".b1").css({"color":"red","font-size":"19px"});
});
$(".a3").mouseout(function(){
$(".b1").css({"color":"#045491","font-size":"16px"});
});

});
</script>

所以我的问题是,如何用更少的代码执行上述操作?我尝试了一些切换/添加、删除方法,但我无法让它工作。上面的代码确实有效,但我觉得它可以用更少的代码行来执行。谢谢。

最佳答案

您可以使用 .index,因为您的 class 名称除了数字之外都是相同的,并且添加/删除 class:

JS

$(".a").find("li").hover(function(){
var index = $(this).index()+1;
$(".b"+index).addClass("active")
}, function(){
$(".b").find("li").removeClass("active")
});

CSS

.active{
color: red;
font-size: 19px;
}

FIDDLE

更新

我看到你对 class 名称的评论只是一个例子,我调整我的代码仍然使用 .index() 这样 li 的类名 是无关紧要的,它会在 ul.b 的相同位置突出显示相应的 li UPDATE 我切换到 James Gaunt 的建议eq() AND StevenL 使用 .toggleCLass。与使用 nth-of-type() 和悬停功能相比,我更喜欢这两种方法:

$(".a").find("li").hover(function(){
var index = $(this).index();
$(".b").find("li").eq(index).toggleClass("active");
});

NEW FIDDLE

关于javascript - 如何用更少的行编写以下代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27932127/

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