javascript - 获取元素内按下按钮的按钮文本

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而不是来查找被单击的元素>这个。请注意处理函数参数中的 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>