javascript - jquery- onclick 查找具有相同类的元素

Question

我卡住了。我有两组具有公共(public)类(zone 和 box)和动态类的动态元素:

<span class="zone dynamicClass1 clickable">Text</span>
<span class="zone dynamicClass6-2 clickable">Text</span>

<div class="box dynamicClass6-2"></div>
<div class="box dynamicClass1"></div>

当您将鼠标悬停在 <span> 上时"zone" , 我想给 <div> 添加一个类"box" .然后在 mouseleave 上我想删除该类。因此，类似于:

$(document).on("mouseenter",".zone",function(){
    $(this + ".the dynamic class").find(".box.the same dynamic class").addClass("hovered");
}).on("mouseleave",".zone",function(){
    $(".box.the found dynamic class").removeClass("hovered");
});

必须从悬停元素中检索动态类，然后用于查找其匹配项，它们不能按名称编程。任何帮助都会很棒。

Answer 1

按照您现在设置的方式，您可以在跨度内搜索 div。你想要做的是获取类，然后找到相应的 div。我建议将公共(public)类移动到 id 数据属性，这样你就可以这样做:

<span class="zone clickable" id="dynamicClass1">Text</span>
<span class="zone clickable" id="dynamicClass6-2" >Text</span>

var currentClass = $(this).attr("id");
$("div." + currentClass).addClass("hovered");

或者这个:

<span class="zone clickable" data-class="dynamicClass1">Text</span>
<span class="zone clickable" data-class="dynamicClass6-2" >Text</span>

var currentClass = $(this).data("class");
$("div." + currentClass).addClass("hovered");

查看这个 JSFiddle: http://jsfiddle.net/7v3hd/1/