的更新

Question

所以我有2 <ul>个，每个<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>的颜色。当我不悬停元素时，我希望格式恢复正常。这是我的代码：

{{1}}

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

Answer 1

您可以使用.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的类名无关紧要，它会突出显示相应的li位于ul.b 更新的同一位置我转而使用James Gaunt建议eq() AND StevenL＆＃39 ; s使用.toggleCLass。我喜欢这两种方法比使用nth-of-type()和悬停功能更好：

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

NEW FIDDLE

Answer 2

至少，您可以为css“提取代码”并为js“进行链式调用”：

origin js

$(".a1").mouseover(function(){
    $(".b1").css({"color":"red","font-size":"19px"});
});
$(".a1").mouseout(function(){
    $(".b1").css({"color":"#045491","font-size":"16px"});
});

到新js：

$(".a1").mouseover(..).mouseout(...);

更改您的原始css代码：

mouse_over_style = {"color":"red","font-size":"19px"}
mouse_out_style = {"color":"#045491","font-size":"16px"}

然后将你的js改为：

$('.b1').mouseover(mouse_over_style).mouseout(mouse_out_style)

如何使用较少的行编写以下代码

2 个答案:

的更新