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

Question

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

<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>

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

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 的位置 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

Answer 2

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

起源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)