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

Question

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

本指南对于推动我朝这个方向发展非常有用：
http://www.foliotek.com/devblog/keep-variable-state-between-event-binding-and-execution/

现在我更深一点了，我试图将数组中相同前缀的muiltiple元素绑定到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 set函数参数运行@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"等。使用两个参数调用$只会将第一个用作选择器，将第二个视为要从中选择的上下文。< / p>

Answer 3

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

然后在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);
});