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;
});

请注意，它this指的是 DOM 节点，而不是jQuery 对象。

边注

将事件处理程序委托给 DOM 树的更高层会更有效率。您可以使用该.on()方法来做到这一点：

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

通过这样做，您在内存中只有一个事件处理函数的副本。通过使用 class 将它绑定到每个元素.menu-button，您可以为每个元素创建一个副本。

委派事件处理程序是可行的，因为大多数 DOM 事件从它们起源的元素向上冒泡。当事件到达#menu时，jQuery 检查它是否源自与作为第二个参数传入的选择器匹配的元素。如果是，则执行处理程序。

于 2012-12-21T09:28:50.233 回答
1

您可以像这样简单地获取按钮的值：

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

由于this指的是事件被激活的 DOM 元素，因此您可以像访问任何其他 DOM 元素一样访问该元素。

然后，您可以使用 aswitch选择正确的按钮：

$('.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”来查找点击了哪个项目。（不是最好的解决方案）

2 /您可以添加.click更好的选择器，$('#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

尝试检查按钮类，将 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 回答
-1

尝试使用这个：

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