在JavaScript中使用for循环将多个元素绑定到事件处理程序

Question

我找到了一种通过for循环将数组中的单个元素绑定到jQuery中的事件处理程序的方法。

该指南有助于将我推向这个方向：
http://www.foliotek.com/devblog/keep-variable-state-between-event-binding-and-execution/

现在我更深入了，我正在尝试将数组中具有相同前缀的多个元素绑定到jQuery中的事件处理程序。

这是有效的方法：

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    $(function() {
        for(var i in menu)
        {
            (function() {
                var x = menu[i];
                var y = menu[i]+'_menu';
                 $(x).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
                 $(y).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
            })();
        }
    }); 
});

这是我真正想要的：

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    $(function() {
        for(var i in menu)
        {
            (function() {
                var x = menu[i];
                var y = menu[i]+'_menu';
                 $(x,y).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
            })();
        }
    }); 
});

UPDATE :::这是最终的工作实现：

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    for(var i in menu)
    {
        (function(x, y) {
             $(x+','+y).hover(
                 function () {
                    $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                    $(y).show();
                 },
                 function () {
                    $(x).css({ backgroundColor: "#333", color: "#FFF"});
                    $(y).hide();
                 }
            );
        })(menu[i], (menu[i] + '_menu'));
    }
});

Answer 1

替代变量x和y设置函数参数运行@param

(function(x, y) {

             $(x+','+y).hover(
                 function () {
                    $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                    $(y).show();
                 },
                 function () {
                    $(x).css({ backgroundColor: "#333", color: "#FFF"});
                    $(y).hide();
                 }
            );
})(menu[i], (menu[i] + '_menu'));

Answer 2

不要使用两个参数调用$ ，而将它们加入一个字符串中：

$(x + "," + y).hover(

这样，您将获得所需的选择器： "#power,#power_menu"等。使用两个参数调用$只会将第一个用作选择器，将第二个用作选择上下文。

Answer 3

$(menu.join(', ')).hover();

然后在悬停调用的匿名函数中：

var _this = $(e.target);
var id = _this.attr('id');
var secondary_elm = $('#' + id + '_menu');
secondary_elm.show();

最终结果是这样的：

             $(menu.join(', ')).hover(
                 function (e) {
                    var _this = $(e.target);
                    var id = _this.attr('id');
                    var secondary_elm = $('#' + id + '_menu');
                    secondary_elm.show();
                 },
                 function (e) {
                    var _this = $(e.target);
                    var id = _this.attr('id');
                    var secondary_elm = $('#' + id + '_menu');
                    secondary_elm.show();
                 }
            );

这省去了要悬停的辅助元素。 如果不了解HTML结构，我会想这是您要重新检查的内容。 首先要处理.hover（）事件。 当您开始聆听多个不同的元素以本质上完成相同的事情时，您会感到非常困惑。

Answer 4

jQuery(function($) {

    // put this in your loop body:

    var $x = $('#x');
    var $y = $('#' + $x.attr('id') + '_menu');

    function mouseIn(event) {
        var $this = $(event.target);    // x or y
        $x.css({ backgroundColor: "#000", color: "#3ABCEF"});
        $y.show();
    }

    function mouseOut(event) {
        var $this = $(event.target);    // x or y
        $x.css({ backgroundColor: "#333", color: "#FFF"});
        $y.hide();
    }

    $x.add($y).hover(mouseIn, mouseOut);
});