addClass＆amp; removeClass到很多div - 有比这更聪明的方法吗？

Question

我正在编写一个包含链接列表和徽标列表的页面。当我将鼠标悬停在与相应徽标或徽标（.chicken_shops）匹配的链接（#chicken_link）上时，.chicken_shops div会获得一个应用于它的“活动”类，因此我可以对其进行一些操作。

我拥有我追求的功能，但我认为必须有一种更聪明的方式来写这个，而不是我做的。如果不是很明显，我对js不太熟悉。

这是我的代码

<script type="text/javascript">
$(document).ready(function(){
    $('#chicken_link').hover(
        function(){$('.chicken_shops').addClass('active');},
        function(){$('.chicken_shops').removeClass('active');}
    );

    $('#rice_link').hover(
        function(){$('.rice_shops').addClass('active');},
        function(){$('.rice_shops').removeClass('active');}
    );

    $('#beans_link').hover(
        function(){$('.beans_shops').addClass('active');},
        function(){$('.beans_shops').removeClass('active');}
    );
    <!-- etc. -->
});
</script>

我的HTML：

<ul>
    <li><a href="#" id="chicken_link">Chicken</a></li>
    <li><a href="#" id="rice_link">Rice</a></li>
    <li><a href="#" id="beans_link">Beans</a></li>
    <!-- etc. -->
</ul>

<ul>
    <li class="chicken_shops"><a href="#">The Chicken Shop</a></li>
    <li class="rice_shops"><a href="#">The Rice Shop</a></li>
    <li class="beans_shops">The Bean Shop</li>
    <!-- etc. -->
</ul>

它有效，但我怎样才能以更紧凑或更智能的方式写出来？

感谢您的帮助！

Answer 1

如果确实想要坚持使用Javascript，您可以考虑使用不太具体的选择器。

例如，使用类选择器将是一个很好的解决方案，因为它可以确保您定位所需的所有内容，但仅此而已。如果您网站上的每个无序列表都有这种行为，您也可以保存一些标记并使用ul li。

这是两个解决方案。单击标题以查看示例。

Javascript solution, using classes

的jQuery

$(document).ready(function() {

  $('.toggle').hover(
    function(){ $(this).addClass('active'); },
    function(){ $(this).removeClass('active'); }
  );

});

HTML

<ul>
  <li><a href="#" id="chicken_link" class="toggle">Chicken</a></li>
  <li><a href="#" id="rice_link" class="toggle">Rice</a></li>
  <li><a href="#" id="beans_link" class="toggle">Beans</a></li>
</ul>

Css solution, using :hover

根据您添加到这个功能的功能，我个人更喜欢使用:hover伪类并完全跳过Javascript。

的CSS

.toggle:hover {
  background: #eee;
}