Question

我有两个清单：

<ul id="list1">
   <li class="link1">Link 1</li>
   <li class="link2">Link 2</li>
   <li class="link3">Link 3</li>
</ul>

<ul id="list2">
   <li class="link1">Link 1</li>
   <li class="link2">Link 2</li>
   <li class="link3">Link 3</li>
</ul>

我希望当我从“list1”悬停“link1”以将类（.active）添加到“list2”中的“link1”时。对于“list2”也是如此......可以创建一个函数，因为我有很多具有相同类的li，并且对于每个类都手动执行它会太糟糕。

Answer 1

试试这个：

$("#list1 li,#list2 li").hover(function() {
    var index =  $(this).index();
    $("#list1, #list2").each(function() {
         $("li",this).eq(index).toggleClass("active");
    });
});

jsFiddle

Answer 2

如果你的li元素没有另一个类而不是link1，link2等，那很容易：

var list1 = $("#list1"); // Store references to list1 and list2
var list2 = $("#list2");

list1.find("li").hover(function() {
    var className = $(this).attr("class"); // Fetch current class name
    list2.find("li").removeClass("active"); // Remove active class from all items in list2
    list2.find("." + className).addClass("active"); // Find an item with the same class name, but only items thats children of list2 (second parameter), and add class active
});

Answer 3

类似的东西：

$("#list1 .link1").hover(function () {
  $("#list2 .link1").addClass("active");
});

或者，使用$（“＃list2”）。find（“。link1”）...

Answer 4

尝试这样的事情：

$("li").hover(function () {
  var targetClass = $(this).attr('class');
  $("."+targetClass).not($(this)).addClass("active");
}, function() {
  $("li").removeClass("active");
});

Answer 5

即使他们没有相同的课程，你也可以这样做

使用$(this).index()将返回当前悬停元素的索引。因此，您只需将该类添加到另一个列表中相同索引的元素

这是一个基本的工作示例：

http://jsfiddle.net/Wckyq/

将一个元素悬停在另一个元素上

5 个答案: