jquery - jQuery を使用した複数のイベントへの関数の遅延バインディング

Question

シナリオは次のとおりです。クリックしたときに対応する機能にバインドしたい一連のボタンがあります。これらのボタンの ID は、対応する機能の名前と同じです。私はこれを行うことができます：

$("#kick").click(kick);
$("#push").click(push);
$("#shove").click(shove);

しかし、私は怠け者で、これをもっと怠惰に行いたいと思っています (私の性質のように)。ボタンはすべてブロック要素に含まれているため、次のようにしたいと思います。

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(doThis);
});

それがうまくいかないことを除いて。助言がありますか？

Answer 1

他の回答者と同様に、これが「真の」怠惰（プログラマーの美徳のように）であるかどうかはわかりませんが、実装の詳細を知っているのはあなただけです。

本当にこのようなことをしたい場合は、オブジェクトを使用して特定の関数を保存し、文字列を使用してそれらを検索できます。

var myFunction = {
     kick:  kick,
     push:  push,
     shove: shove
};

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(myFunction[doThis]);
});

または無名関数として：

var myFunction = {
     kick:  function() { /*do kick  */ },
     push:  function() { /*do push  */ },
     shove: function() { /*do shove */ }
};

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(myFunction[doThis]);
});

Answer 2

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(function(doThis){
      alert(doThis);
    });
});

Answer 3

<input type="submit" id="kick" value="Kick Me">
<input type="submit" id="push" value="Push Me">

<script type="text/javascript>
$(function() {
    $("input[type=submit]").each(function () {
        var doThis = this.id;
        $(this).click(doThis);
    });
});
</script>

Answer 4

私はこれのポイントを見ていないと思います。とにかく、各関数を個別に作成する必要があり、この種のプログラミングは、他の人が通常理解しにくいものです。何十ものボタンがあり、それが使い捨てのコードである場合は、理解できますが..おそらくそうではありません...

すべてを 1 つの関数にバインドし、イベント時に this.id に基づいて判断しないのはなぜですか??

Answer 5

その非常に簡単です！click メソッドに none-function を渡そうとします。

var doThis = this.id;
$(this).click(doThis);

関数を渡す必要があります：

 $(this).click(function(doThis){
      alert(doThis);

});

また ：

function myFunc(){};
$(this).click(myFunc);