4

I have this code:

            $('.counter_d').mouseover(function() {
                   $('#description').html('Counter');
             });
            $('.selector_d').mouseover(function() {
                   $('#description').html('Selector');
             });
             $('.date_d').mouseover(function() {
                   $('#description').html('Date');
             });

and several more, but I think the file could be smaller and even reusable using loops, but I'm not able to bind the description (HTML method) with the selector.

I want to use something like this:

              var selectors=['.counter_d','.selector_d','.date_d'];
              var description=['Counter', 'Selector', 'Date'];


              for(var i=0; i<selectors.length; i++)
                 $(selectors[i]).mouseover(function() {
                   $('#description').html(description[i]);
                 });

Any help? Thanks

4

6 に答える 6

8 
var selectors = {
    '.counter_d': 'Counter',
    '.selector_d': 'Selector',
    '.date_d': 'Date'
};


$.each(selectors, function (key, value) {
    $(key).mouseover(function () {
        $("#description").html(value);
    });
});

Example: http://jsfiddle.net/andrewwhitaker/bS28q/

于 2012-09-09T01:21:55.877 に答える
1

i問題は、マウスオーバー コールバックの実行時に変数が 3 に割り当てられることです。
そのまま、新しい HTML は割り当てられませんdescription[3]。フィドルを有効にすると、ブラウザ コンソールが console.log を読み取ることができます。undefined

より洗練された解決策は、HTML 要素に追加の属性を与え、descriptionマウスオーバー コールバックで単純に行うことだと思います。

$('#description').html($(this).attr("description"));

（上記のフィドルで確認できます）

私の意見では、すべての要素をよりエレガントな方法で選択して、ループから抜け出すこともできます。jQuery がこれを処理してくれるからです。

$(".counter_d, .selector_d, .date_d").mouseover(function() {
    $('#description').html($(this).attr("description"));
});

更新されたフィドル

于 2012-09-09T01:37:13.690 に答える
1

正しい解決策が既に与えられているので ( Andrew Whitaker の受け入れられた回答が私のお気に入りです)、実際にコードの問題を説明します( yoshi の回答にはいくつかの手がかりがありますが、詳細には説明されていません)。

問題

問題は、iループ内で値が変更されても、実行時に、イベント ハンドラーが実行されたiときに同じ (ループが終了したときと同じ) ままになることです。for

コード内で実際に何が起こるか

証明は次のようになります ( jsfiddleを参照)。

var selectors=['.counter_d','.selector_d','.date_d'];
var description=['Counter', 'Selector', 'Date'];

for(var i=0; i<selectors.length; i++)
    $(selectors[i]).mouseover(function() {
        $('#description').html(i); // i is always equal to 3
    });​

問題は、イベント ハンドラーiが外部スコープから使用することです。これは、ハンドラーの実行時に に等しくなり3ます。したがってi、ハンドラーがアタッチされたときに変数に必要な値が含まれていても、値は実行される前に変更されます。

ソリューション

これを解決するには、コードを少し変更して、その時点で正しい値の を渡すことですぐに呼び出される無名関数を使用することができますi。

var selectors=['.counter_d','.selector_d','.date_d'];
var description=['Counter', 'Selector', 'Date'];
for(var i=0; i<selectors.length; i++)
    (function(i){
        $(selectors[i]).mouseover(function() {
            // i is the same as when the outer function was called
            $('#description').html(description[i]);
        });
    })(i); // executing function by passing current i
​

正しく動作することを証明するには: http://jsfiddle.net/ZQ6PB/

続きを見る

ループ内の JavaScript クロージャー - 簡単な実用例,

于 2012-09-09T07:13:28.803 に答える
0

私は次のようなものに行きます：

var obj = {
    'a': 'content a',
    'b': 'content b',
    'c': 'content c'
};

$('.a,.b,.c').mouseover(function() {
    $('#d').html(obj[this.className]);
});​

デモ

ループのアイデアはあまり好きではありません。

UPD:より多くのクラスのソリューションをいつでも拡張できます

var obj = {
    '.a': 'content a',
    '.b': 'content b',
    '.c': 'content c'
};

var selector = Object.keys(obj).join(',');
$(selector).mouseover(function() {
    $('#d').html(obj['.' + this.className]);
});​

デモ

于 2012-09-09T01:31:46.167 に答える
0

セレクターはすべて _d で終わっているようです。次のことができるのは合理的だと思われます。

$('[class$=_d]').mouseover(function(){
    var str = $(this).prop('class').split('_')[0];
    var desc = str.charAt(0).toUpperCase() + str.slice(1);
    $('#description').html(desc);
});
于 2012-09-09T01:35:01.030 に答える
0

次のように HTML を構築します (要素がスパンであると仮定します) ...

<span class="d counter_d" data-desc="Counter">...</span>
<span class="d selector_d" data-desc="Selector">...</span>
<span class="d date_d" data-desc="Date">...</span>

... JavaScript を次のように単純化できます。

var $description = $("#description");

$(".d").mouseover(function() {
    $description.text($(this).data('desc'));
});

クラス名「.counter_d」、「.selector_d」、「.date_d」は冗長であり、他の理由で必要でない限り削除できます。スタイリング。

もちろん、そのような要素が何百もある場合、HTML を手書きで書くのは面倒です。別のアプローチを使用したほうがよいでしょう。

于 2012-09-09T02:11:49.253 に答える