javascript - 各ループ内のjQueryクリック

Question

コードを短くするために、クリックイベントをループしたいと思います。後でこれらの値を30個持つ可能性があります。

私の作業コード

$(document).ready(function () {
    var last_click = '';

    $("#title").click(function() { last_click = 'title'; });
    $("#subtitle").click(function() { last_click = 'subtitle'; });
    $("#test").click(function() { last_click = 'test'; });
});

これが私が望む方法です（機能していません）

私の推測では、各ループはdomの準備ができて実行され、その後は二度と実行されないので、クリックイベントをトリガーすることはできませんか？

$(document).ready(function () {
    var last_click = '';
    var contents = new Array();
    contents = ['title', 'subtitle', 'test'];

    $.each(contents , function(index, value){
        $("#" + value).click(function() { last_click = value; });
    });
});

私のように解決されない場合は、素晴らしい回避策に感謝します。

Answer 1

これをバインドするすべての要素にクラスを追加します。たとえばclass="last-click" 、バインディングを次のように定義します。

$(".last-click").on('click', function() {
    last_click = this.id;
}

Answer 2

ボタンまたは要素のvalue属性がある場合は、次のように実行できます。

$(document).ready(function() {
    var last_click = '';
    $("input").click(function() {
        last_click = $(this).attr('value');
        alert(last_click);
    });    
});​

「inputtype="button」を使用していると仮定しました。また、実際の動作を確認できるデモもあります：http: //jsfiddle.net/rS2Gb/5/

Answer 3

本当に短くしたい場合は、それらすべてに同様のクラスを与えてください。

$(document).ready(function () {
    var last_click = '';    
    $(".theclass").click(function() { 
        last_click = this.id; 
    });
});