0

forループを使用して配列内の単一要素をjQueryのイベントハンドラーにバインドする方法を見つけました。

このガイドは、私をその方向に進めるのに役立ちました：
http ://www.foliotek.com/devblog/keep-variable-state-between-event-binding-and-execution/

今、私は1レベル深くなり、配列内の同じプレフィックスを持つ複数の要素を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

2つの引数を使用して呼び出すのではなく$、文字列で結合します。

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

このようにして、必要なセレクターを取得します"#power,#power_menu"。など。2つの引数を使用して呼び出す$と、最初の引数のみがセレクターとして使用され、2番目の引数は選択するコンテキストとして扱われます。

于 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();
                 }
            );

これにより、ホバーされるための2次要素が除外されます。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 に答える