javascript - 当事件触发时，如何在 javascript 中使用数组来匹配 div？

Question

我有一组两个 div - 第一组:当人们将鼠标悬停在这些 div 上时，它将触发一个事件，第二组:当事件被触发时，将显示这些 div。 当您将鼠标悬停在第一组中的某个 div 上时，它应该显示第二组中相应的 div。我认为将鼠标悬停 div 与要显示的正确 div 相匹配的一种简单方法是使用数组。我已经能够正确附加事件监听器，但我不知道如何设置它，以便当您将鼠标悬停在数组的一个对象上时，它会显示具有相同索引号的数组对象。我想如果我能弄清楚如何识别我鼠标悬停的对象的索引号，我就可以让它工作。我尝试了很多东西，但没能创造出任何有效的东西。代码如下:

<script>
$(document).ready(function(){


//create array of divs to mouse over 
var ar = new Array();
ar[0] = $("#home"); 
ar[1] = $("#doc");

var length = ar.length;

//create array of divs to display when event is fired 
var des = new Array();
des[0] = $("#homeDes");
des[1] = $("#docDes");


// start for
for ( var i = 0; i< length; ++i )
{
ar[i].bind("mouseover",function(){$(des[i]).css("display","block");});
ar[i].bind("mouseout",function(){$(des[i]).css("display","none");});
} 
//end for

}); 
//end 

</script>

Answer 1

我倾向于采取更灵活的方法来解决此问题，以便您在更改 HTML 时无需更改 JavaScript。考虑对需要绑定(bind)的元素进行分类并提供数据属性来指定目标。要绑定(bind)的 div 的 HTML 可能如下所示:

<div id="home" class="mouseoverToggleTrigger" data-target="#homeDes">...</div>

jQuery 可能如下所示:

$(document).ready(function(){

    $('.mouseoverToggleTrigger').hover(function() {
        var $target = $($(this).data('target'));
        $target.toggle();
    }
}); 

请注意，这是假设您使用的是 HTML5，默认情况下，jQuery 将 data-* 转换为可通过 data() 检索的值。

对于非 HTML5 的页面，这种更通用的解决方案将起作用

$(document).ready(function(){

    $('.mouseoverToggleTrigger').hover(function() {
        var $target = $($(this).prop('data-target'));
        $target.toggle();
    }
});

这带来了额外的一点灵 active ，那就是您现在不必将自己限制在目标映射的一对一触发器上。您可以为 data-target 值指定类名称或其他 jQuery 选择器，以获得高度自定义的行为，例如一个触发器切换某个类中属于另一类子级的所有元素。