Question

我有两个按钮

<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>

我设置了一个.on事件，以便在激活一个事件时触发。

$('.somespan').on("mousedown tap", function() {
direction = ($(this).text());
})

这会产生结果leftright，因为它提供了所有按钮的按钮文本。如何只获取单击按钮的按钮文本？

Answer 1

问题是因为您已将活动附加到span。要让this引用button元素，您需要将事件附加到该元素。试试这个：

$('.somespan button').on("mousedown tap", function() {
  direction = $(this).text();
  console.log(direction);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
  <button type="button">left</button>
  <button type="button">right</button>
</span>

或者，如果选择span，则可以使用event.target代替this找到点击的元素。请注意处理函数参数中的e。

$('.somespan').on("mousedown tap", function(e) {
  direction = $(e.target).text();
  console.log(direction);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
  <button type="button">left</button>
  <button type="button">right</button>
</span>

Answer 2

您必须将监听器附加到按钮上：）

$('button').on("mousedown tap", function() {
    direction = ($(this).text());
})

或跨越

$('.somespan').on("mousedown tap","button", function() {
    direction = ($(this).text());
})

Answer 3

尝试添加

$('.somespan button').on("mousedown tap", function() {
direction = ($(this).text());
})

在您的情况下，您要将mousedown事件添加到范围而不是按钮

Answer 4

将您的选择器从$('.somespan')更改为$('.somespan>button')，以定位特定button。

$('.somespan>button').on("mousedown tap", function() {
  var direction = $(this).text();
  console.log(direction)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
  <button type="button">left</button>
  <button type="button">right</button>
</span>

获取元素内按钮的按钮文本

4 个答案: