0

我找到了一种将带有 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();
                     }
                );
            })();
        }
    }); 
});

更新 ::: 这是最终的工作实施：

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'));
    }
});
4

4 回答 4

3

替代变量 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'));
于 2012-09-27T01:28:01.380 回答
1

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

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

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

于 2012-09-27T01:21:17.887 回答
1 
$(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() 事件是一件痛苦的事情。当你开始听多个不同的元素来做同样的事情时，你会要求一大堆混乱。

于 2012-09-27T01:24:36.340 回答
0 
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);
});
于 2012-09-27T01:30:20.783 回答