Question

我有以下带有多个按钮的HTML表：

<table>
    <thead>
        <tr>
            <th> </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button id="theBtn" key="9cb4064c-0fd8-454c-bfbc-bfaf0741c0e8" class="icons icon_hardwaresoftware icons0500 iconedit"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="theBtn" key="04e25e95-7aec-4d90-b8c0-f1d706e59a56" class="icons icon_hardwaresoftware icons0500 iconedit"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="theBtn" key="a834a18b-5c9f-451c-a414-07becdbf728c" class="icons icon_hardwaresoftware icons0500 iconedit"></button>
            </td>
        </tr>
    </tbody>
</table>

我定义了一个函数来处理onClick事件：

theBtn.onclick = function() {
    var key = theBtn.attr('name');
    ...
}

但是问题是我不知道单击了哪个按钮。我阅读的所有 Stackoverflow 示例都有两点与我的情况有所不同：

选择的jQuery类具有单个值，我的具有四个值
HTML元素是一个提交类型输入元素，我的是一个按钮

所以，我被困住了。

Answer 1

ID的主要概念是它应该是唯一的。

也不要使用将事件侦听器绑定到ID，而是使用class。

在回调“ this”中，保留了代码片段中所单击元素的范围，供您参考

$('.iconedit').on('click', function(){

console.log(this);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th> </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button id="theBtn" key="9cb4064c-0fd8-454c-bfbc-bfaf0741c0e8" class="icons icon_hardwaresoftware icons0500 iconedit first"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="theBtn" key="04e25e95-7aec-4d90-b8c0-f1d706e59a56" class="icons icon_hardwaresoftware icons0500 iconedit second"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="theBtn" key="a834a18b-5c9f-451c-a414-07becdbf728c" class="icons icon_hardwaresoftware icons0500 iconedit third"></button>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

首先，您不能在同一页面上使用相同的ID，这就是为什么要使用ID，如果您有多个按钮执行相同的操作，则必须设置相同的类，例如class =“ theBtn”

这个小片段可以帮助您

let btn = document.getElementsByClassName("theBtn");

for (var i = 0; i<btn.length; i++){
    btn[i].onclick = function() {
        console.log(this.getAttribute('key'));
    }
}

或者使用jQuery

$(".theBtn").on("click", function(){
    console.log($(this).attr('key'));
})

Answer 3

因此，考虑到您的提示，建议和批评者，我以这种解决方案结束了此事：

$( document ).ready(function() {
    $( 'button.icons.icon_hardwaresoftware.icons0500.iconedit' ).on("click", function(){
        console.log($(this).attr('key'));
    })
});

通过使用所有CSS类名称，我可以读取单击按钮的 key 属性值，而不是该唯一ID。

如何使用jQuery识别单击了哪个按钮

3 个答案: