jQuery使用同一类的多个按钮返回一个值[重复]

Posted 2023-05-07

【中文标题】jQuery使用同一类的多个按钮返回一个值[重复]

【英文标题】：jQuery using multiple buttons of the same class to return a value [duplicate]

【发布时间】：2015-08-04 00:38:00

【问题描述】：

我有一个由 php 生成的条目列表，每个条目都在自己的 div 中，并且每个条目都有一个唯一的 ID。我正在尝试开发一个 AJAX 调用，它可以根据 ID 删除每个条目，但是每当我运行下面的脚本时，它总是返回 0。

<div>
    Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>
    Another entry here
    <button id="1" class="remove">Remove</button>
</div>
// ... and so on

<script>
    $(".remove").click(function() 
        var id = $(".remove").attr('id');
        alert(id); // debug
        // AJAX call here
    );
</script>

以前我尝试过同样的事情，除了相反的方法 - PHP 返回的 id 在 class 属性中，id 属性的值是 'remove' ，这只为第一个按钮返回 0。第二个按钮根本没有调用 jQuery 脚本。

如何将唯一 ID 传递给同一个 jQuery 调用？

【参考方案1】：

试试这个

$(".remove").click(function() 
    var id = $(this).attr('id'); // $(this) refers to button that was clicked
    alert(id);
);

【参考方案2】：

未来观众的香草选项。

选择类remove的所有元素 遍历元素，分配点击处理程序 点击删除父元素 将 id 记录到控制台

(function () 
    "use strict";
    var buttons = document.getElementsByClassName('remove');
    for ( var i in Object.keys( buttons ) ) 
        buttons[i].onclick = function() 
            this.parentElement.remove();
            console.log(this.id);
        ;
    
)();

<div>Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
    <button id="1" class="remove">Remove</button>
</div>

【参考方案3】：

只需使用 this.id 即可获取元素的 id

$(".remove").click(function() 
  alert(this.id);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Some entry here
  <button id="0" class="remove">Remove</button>
</div>
<div>
  Another entry here
  <button id="1" class="remove">Remove</button>
</div>

【参考方案4】：

$(".remove").on("click",function() 
    var id = $(this).attr('id');
    console.log(id);
);

【参考方案5】：

你需要使用this关键字来引用被点击的元素：

$('.remove').click(function() 
    var id = this.id;
    // OR
    var id = $(this).attr('id');
);