Question

我在一个表中有100个按钮，这些按钮具有相同的类名但不同的id c-1，c-2，....，c-n <input type="button" class="btn-c" id="c-1" value="ADD"> 我将如何知道使用他们的className点击了哪个按钮，并且在每个按钮上使用onclick事件 <input type="button" ... onclick="call_function(this);" 为简单起见，我想点击100个按钮中的任意一个来alert(button.id);

Answer 1

使用jQuery - 将单击处理程序附加到公共类，并使用this的实例获取单击按钮的ID

$(".btn-c").click(function() {
    alert(this.id); //id of the clicked button
});

Answer 2

如果您有这么多按钮，使用事件委派是有意义的：

$('table').on('click', '.btn-c', function() {
    alert(this.id); // will get you clicked button id
});

这是性能立场的最佳方法，因为您只将一个事件处理程序绑定到父元素，并从子元素事件冒泡中受益。

UPD。这是相同代码的纯javascript版本：

document.getElementById('table').addEventListener('click', function(e) {
    if (/\bbtn-c\b/.test(e.target.className)) {
        alert(e.target.id);
    }
}, false);

演示：http://jsfiddle.net/zn0os4n8/

Answer 3

您需要将事件附加到父元素并侦听点击。您可以使用事件对象来确定要点击的内容。你可以检查它是否是你想要的元素，并做任何你想做的事情。

＆＃13;

document.body.addEventListener("click", function (e) {  //attach to element that is a parent of the buttons
    var clickedElem = e.target;  //find the element that is clicked on
    var isC = (clickedElem.classList.contains("c"));  //see if it has the class you are looking for
    var outStr = isC ? "Yes" : "No";  //just outputting something to the screen
    document.getElementById("out").textContent = outStr + " : "  +  clickedElem.id;    
});

＆＃13;

<button class="d" id="b0">x</button>
<button class="c" id="b1">y</button>
<button class="c" id="b2">y</button>
<button class="c" id="b3">y</button>
<button class="d" id="b4">x</button>
<div id="out"></div>

＆＃13;

注意：如果没有polyfill，这在旧的IE中不起作用。

如何判断使用className而不是ID来点击哪个按钮

3 个答案:

演示：http://jsfiddle.net/zn0os4n8/