基于类的jQuery按钮处理

所以我想写一个函数来处理具有特定类的所有按钮。
每个按钮应该有不同的动作，由函数调用。如何将特定的按钮提交给我的函数，而无需通过onclick在我的html标记中调用该函数？基于类的jQuery按钮处理

这是到目前为止我的代码：

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

来源

2012-12-21 Sprottenwels

您可以使用this获得DOM对象或$(this)得到jQuery对象，你也可以使用event.target以获取事件的源DOM对象。

Live Demo

$('.menu-button').click(function(event){ 
    alert(event.target.value); 
    alert(this.value); 
    alert($(this).val()); 
});

来源

2012-12-21 09:28:15 Adil

或者，而不是'event.target '，只需使用'this'。 – Cerbrus

谢谢@Cerbrus，更新了我的答案 – Adil

没问题。全部（？）选项1答案 - > +1。 – Cerbrus

你可以简单地获得按钮的价值是这样的：

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

由于this指DOM元素活动在/激活的，你可以访问像你这样的元素可以是任何其他的DOM元素。

然后，您可以使用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-21 09:28:29 Cerbrus

在事件处理器，this将指已经被点击的元素。你可以像任何元素一样与它进行交互。如果它有一个ID，就可以访问它id属性：

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

注意this指的是DOM节点，不一个jQuery对象。

旁注

这将是更有效的委托事件处理程序越往上DOM树。您可以使用.on()方法，这样做：

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

通过这样做，你只需要在事件处理函数的一个副本在内存中。通过将其绑定到类.menu-button的每个元素，您都有每个元素的副本。

委托事件处理程序的工作原理是因为大多数DOM事件都会从它们所源自的元素向上冒泡。当事件到达#menu时，jQuery会检查它是否源于匹配作为第二个参数传入的选择器的元素。如果是这样，那么处理程序就会执行。

来源

2012-12-21 09:28:50

详细说明DOM节点与jQuery对象：'$（this）'是此jQuery对象。 – Cerbrus

非常感谢。请问为什么你的附注被宣布为“更有效”？ – Sprottenwels

@Sprottenwels - 不客气。我已经更新了我的答案，并提供了一些更详细的信息。 –

var currentId = $(this).attr('id');

来源

2012-12-21 09:29:28

或'var currentId = this.id;'。如果您只获取ID，则无需使用所有jQuery封装。 – Cerbrus

-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-21 09:29:38

1 /您可以访问所点击的项目与$(this)。并做大量'if/else'来找到哪个项目被点击。（不是最好的解决方案）

2 /你可以有更好的选择添加.click像$('#your-id.menu-button').click() 这样你会避免做很多if/else语句中找到已被点击哪个元素。

来源

2012-12-21 09:29:51 Mordhak

-1

尝试使用这样的：

$('.menu-button').click(function(){ 
    alert($(this).attr('id')) ; 
});

来源

2012-12-21 09:35:50

完全相同已经得到了回答，同样的评论在这里适用：当你只是获得元素的'id' /'值'时，不要使用jQuery包装器。等等。使用'this.id'代替。 – Cerbrus

这将做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-21 09:40:27 Jai

当你只是获得元素的'id' /'值'等时，不要使用jQuery包装器。请改用'this.value'。 – Cerbrus

基于类的jQuery按钮处理

回答

相关问题