1

ページ上のいくつかの機能をアクティブにするボタンがいくつかありますが、コードを削減するために使用できるショートカットがあるかどうか疑問に思っています:

HTML:

<button id="button1">button1</button>
<button id="button2">button2</button>

JQuery:

$('#button1').live('click', // click id button1
    MyCode('#example', function () {
    this.button1(); // fire button1 function
    });
});
$('#button2').live('click', // click id button2
    MyCode('#example', function () {
    this.button2(); // fire button2 function
    });
});

私の質問は次のとおりです。ボタンに設定できる値があれば、転送してクリックを起動し、その中で同じ名前の関数を実行できます...おそらく.data()を使用していますか? たとえば、ページに 50 個のボタンがある場合、これは多くのコード/時間を節約できる可能性があります

私は検索しましたが、これに関する情報は少し大雑把であることがわかりました。

4

1 に答える 1

4

私の質問は: クリックを起動するために転送できるボタンに設定できる値がある場合...

あなたはすでにそれをやっています：あなたはidボタンに付けています：

$(document).on("click", "#button1, #button2", function() {
    var btn = this;
    MyCode('#example', function () {
        this[btn.id]();
    });
});

on非推奨（および削除）ではなく使用しliveます。古いバージョンの jQuery を使用している場合は、次のようにします。

$(document).delegate("#button1, #button2", "click", function() {
     /* ...same content here...*;
});

(引数の順序が とは異なることに注意してくださいon。)

いずれにせよ、ポイントはidボタンのスイッチを切ることです。

idセレクターにすべてをリストするよりも、ボタンにクラスを配置したい場合があります。次に例を示します。

<button id="button1" class="btn">button1</button>
<button id="button2" class="btn">button2</button>

と

$(document).on("click", ".btn", function() {
    var btn = this;
    MyCode('#example', function () {
        this[btn.id]();
    });
});

さらに、 を使用したくない場合は、属性idを使用できます。data-*

<button data-func="button1" class="btn">button1</button>
<button data-func="button2" class="btn">button2</button>

と

$(document).on("click", ".btn", function() {
    var btn = this;
    MyCode('#example', function () {
        this[$(btn).attr("data-func")]();
    });
});

...しかしid、それらが一意である場合、使用しても問題はありません。

于 2013-06-02T22:44:16.377 に答える