jQuery：从数组

Question

我正在使用此功能，但它无法正常工作：只有最后一个元素有效。

这是我的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>
.
.
.

感谢您的帮助。

Answer 1

尝试类似的东西：

$('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

Answer 2

我建议你这样做：

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

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

Answer 3

正确的解决方案是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);
        });
    });
}

感谢Izumi ......