jQuery：从数组中选择元素答案

【问题标题】：jQuery: select element from arrayjQuery：从数组中选择元素
【发布时间】：2016-09-22 20:35:18
【问题描述】：

我正在使用这个函数，但它不能正常工作：只有最后一个元素有效。

这是我的 JavaScript 代码：

function hover_action() {

    var array = ["elem1","elem2","elem3","elem4"];

    $(array).each(function( index, value ) { 
        value1 = "#box-" + value + " img";
        value2 = "div#name-" + value;
        $(value1).hover(function(){
            $(value2).fadeIn(300);
        }, function(){
            $(value2).fadeOut(300);
        });
    });
}

她是我的 HTML 代码：

<div>
    <div id="box-elem1"><img src="path1" /></div>
    <div id="name-elem1"><span>NAME 1</span><div>
</div>
<div>
    <div id="box-elem2"><img src="path2" /></div>
    <div id="name-elem2"><span>NAME 2</span><div>
</div>
<div>
    <div id="box-elem3"><img src="path3" /></div>
    <div id="name-elem3"><span>NAME 3</span><div>
</div>
.
.
.

感谢您的帮助。

【问题讨论】：

在函数中调用的循环中绑定事件不是一个好主意。
如果没有相关的 html，我们无法评估为什么它不能工作
您将value2（和value1 btw 但在这里并不重要）定义为全球性的，这就是原因。使用var 声明：var value2 = "div#name-" + value;

标签： jquery arrays select element

【解决方案1】：

Izumi 给出了正确的解决方案，但他/她的答案已经从这个帖子中消失了（？）

function hover_action() {

    var array = ["elem1","elem2","elem3","elem4"];

    $.each(array,function( index, value ) { 
        value1 = "#box-" + value + " img";
        value2 = "div#name-" + value;
        $(value1).hover(function(){
            $(value2).fadeIn(300);
        }, function(){
            $(value2).fadeOut(300);
        });
    });
}

感谢泉...

OP 代码不工作的原因是选择器的错误使用。在 JQuery 中，$() 是针对 DOM 对象的元素选择器。 array 是 javascript 变量，所以它不起作用。 $.each 是遍历 javascript 变量的正确方法。

Reference from JQuery: jQuery.each()

【讨论】：

【解决方案2】：

尝试类似的方法：

$('div[id^="box-"]').hover(function(){
            $(this).next('div[id^="name-"]').fadeIn(300);//asuming the next element is the element you want to hover
        }, function(){
            $(this).next('div[id^="name-"]').fadeOut(300);
        });

看在上帝的份上，使用类

demo

【讨论】：

【解决方案3】：

我建议你这样做：

var $els = $("#elem1, #elem2, #elem3, #elem4");

$els.hover(function() {
  $("div#name-" + this.id).fadeIn(300);
}, function() {
  $("div#name-" + this.id).fadeOut(300);
});

【讨论】：