0

だから私は特定のクラスを持つすべてのボタンを処理する関数を書きたいです。
各ボタンには、関数によって呼び出される異なるアクションが必要です。onclickを介してHTMLマークアップでその関数を呼び出すことなく、特定のボタンを関数に送信するにはどうすればよいですか?

これまでの私のコードは次のとおりです。

<div id="menu" class="center">
   <ul class="menu-list center">
       <li><input type="button" value="Gruppe A" class="menu-button"></li>
       <li><input type="button" value="Gruppe B" class="menu-button"></li>
       <li><input type="button" value="Gruppe C" class="menu-button"></li>
   </ul>
</div>

$('.menu-button').click(function() {
    // here i want to check which button was clicked, for example by an ID.
});
4

8 に答える 8

3

thisオブジェクトを取得するために使用するDOMか$(this)、jQuery オブジェクトを取得するために使用できます。また、イベントのソースのオブジェクトevent.targetを取得するために使用することもできます。DOM

ライブデモ

$('.menu-button').click(function(event){
   alert(event.target.value); 
   alert(this.value);
   alert($(this).val());
});​
于 2012-12-21T09:28:15.637 に答える
2

イベント ハンドラー内で、thisクリックされた要素を参照します。他の要素と同じように操作できます。ID がある場合は、そのidプロパティにアクセスできます。

$('.menu-button').click(function(){
    var id = this.id;
});

jQuery オブジェクトではなくthis、DOM ノードを参照していることに注意してください。

サイドノート

イベント ハンドラーを DOM ツリーの上位に委譲する方がはるかに効率的です。.on()メソッドを使用してそれを行うことができます：

$("#menu").on("click", ".menu-button", function () {
    // Do stuff
});

これにより、イベント ハンドラー関数のコピーが 1 つだけメモリに残ります。class を使用してすべての要素にバインドすると、.menu-button各要素のコピーが作成されます。

ほとんどの DOM イベントは発生元の要素からツリーをバブルアップするため、イベント ハンドラーの委任が機能します。イベントが に達する#menuと、jQuery は、2 番目の引数として渡されたセレクターに一致する要素で発生したかどうかを確認します。存在する場合、ハンドラが実行されます。

于 2012-12-21T09:28:50.233 に答える
1

次のようにボタンの値を簡単に取得できます。

$('.menu-button').click(function(){
    var value = this.value; // "Gruppe A" (Or B / C)
});

イベントがアクティブ化された DOM 要素を参照するためthis、他の DOM 要素と同じように要素にアクセスできます。

次に、 a を使用しswitchて右のボタンを選択できます。

$('.menu-button').click(function () {
    switch (this.value) {
        case 'Gruppe A':
            // Do something for button 1
            break;
        case 'Gruppe B':
            // Do something for button 2
            break;
        default:
            console.error('This button has not yet been implemented:', this);
    }
});
于 2012-12-21T09:28:29.357 に答える
1

1/ でクリックした項目にアクセスできます$(this)。そして、クリックされたアイテムを見つけるために、多くの「if/else」を実行します。（最善の解決策ではありません）

.click2/ この方法のようなより良いセレクターを追加すると、$('#your-id.menu-button').click() クリックされた要素を見つけるために多くの if/else ステートメントを実行することを避けることができます。

于 2012-12-21T09:29:51.623 に答える
0 
var currentId = $(this).attr('id');
于 2012-12-21T09:29:28.593 に答える
0

これはif you have stactic buttonsあなたのdomで行います：

$('.menu-button').click(function() {
    console.log($(this).val());
});

そしてこれはうまくいきますif you have dynamically generated button list：

$(document).on('click', '.menu-button', function(){
    console.log($(this).val());
});
于 2012-12-21T09:40:27.820 に答える
-1

これを使用してみてください：

$('.menu-button').click(function(){
    alert($(this).attr('id')) ;
});​
于 2012-12-21T09:35:50.883 に答える
-1

ボタン クラスを確認して、ID を次のように置き換えます。

if(button.attr('id) == 'something')

またはボタンの現在の値:

if(button.val() == 'something')

..

$('.menu-button').click(function(ev) {

  var button = $(this);

  if(button.hasClass('someclassA')) {

  }
  else if(button.hasClass('someclassB')) {

  }
  else {

  }

  ev.preventDefault();
});
于 2012-12-21T09:29:38.850 に答える