web-dev-qa-db-ja.com

単一のJavaScriptクリックイベントでの複数のID

JavaScriptでは、クリックイベントを使用してチャートデータを変更しています。以下は、クリックイベントのメソッドです。

$('#pro1').click(function () {
            chart.series[0].update({
                data: pro1
            });
        });
        $('#pro2').click(function () {
            chart.series[0].update({
                data: pro2
            });
        });
        $('#pro3').click(function () {
            chart.series[0].update({
                data: pro3
            });
        });

これら3つのクリックイベントを1つのイベントに縮小する必要があります。つまり、IDを処理する1つのクリックイベントを作成する必要があります。以下のコードのようなもの。

$('#pro'+i).click(function () {
chart.series[0].update({
     data: pro+i
});
});


正確に行う方法がわかりません。上記のコードは正しくありません。JavaScriptの知識が不足しているだけです。

javascriptjqueryevent-handlingclick
15
MAR

オブジェクトを作成し、クラスを使用して要素を選択することをお勧めします。クリックされた要素のidは、ヘルパーオブジェクトの対応するプロパティの値を取得します。

var pros = {
   pro1: '...',
   pro2: '...'
};

$('.pros').click(function () {
    chart.series[0].update({
        data: pros[this.id]
    });
});
12
undefined

これを試して：

var that = this;
$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: that[$(this).attr('id')];
    });
});
47
Alex K
$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: $(this).attr('id');
    });
});

更新されたコード

$('#pro1,#pro2,#pro3').click(function () {
    chart.series[0].update({
        data: window[this.id]
    });
});
10
Tushar Gupta - curioustushar

クラスを使用します。

$('.pro').click(function () {
 chart.series[0].update({
   data: $(this).attr('id');
 });
});

そして、各＃pro1、＃pro2、＃pro3要素に「pro」のクラスを追加します

4
Niall Paterson
$("*[id^=pro]").click(function () {
    chart.series[0].update({
         data: $(this).attr('id');
    });
});
2
Grigur

すべての要素にクラス名を付け、jQuery内で：eq（）セレクターを使用できます。

0
Dominic Sore