引导多个按钮仅获取按下的按钮的文本

Question

使用此处发布的答案，我创建了一个按钮组

<div class="btn-group" data-toggle="buttons-radio">
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
</div>

和一个

jQuery

函数

$(".btn-group> .btn").on("click", function(){
    alert($('.btn-group> .btn').text()); 
}); 

但是，当我按下按钮时，警报框中显示的文本会返回所有按下的按钮，如何才能只返回按下的按钮？

Answer 1

此选择器返回all匹配元素：

$('.btn-group> .btn')

因此，合理地，这将返回所有文本，或者可能默认为第一个匹配文本（后者）：

$('.btn-group> .btn').text()

不过，您不需要首先重新选择元素。 如果您只想要被单击的元素，

this

指的是 jQuery 事件处理程序中的元素：

$(".btn-group> .btn").on("click", function(){
    alert($(this).text()); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
</div>