Question

我需要打印在一组按钮内单击的按钮的值，因为它是对所有按钮触发的警报，但是我如何知道选择了哪个按钮？ ^ 有什么聪明的方法可以知道哪个是最后一个活动按钮并获取其值？

window.onload = function(){

  $('#page-buttons').on('click', function() {
    alert('value of button clicked');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  
    <div class="wrapper">
      <div class="container">

        <div class="row">
          <div class="col-sm-12">
            <h1> Python</h1>
            <p id="cont">blabla</p>
          </div>
        </div>

        <div id="page-content" class="page-content">
          <div class="btn-group" id="page-buttons">
            <button type="button" class="btn btn-primary"  value="first" >First</button>
            <button type="button" class="btn btn-primary"  value="last" >Last</button>
          </div>
        </div>
      </div>
    </div>
</head>
</html>

对不起，我的英语不好，我希望一切都清楚

Answer 1

e.target代表单击的元素，因此您可以检查.val()中的e.target。另外请注意，单个文档中的重复ID是无效的HTML -只能使用类。

$('#page-buttons').on('click', function(e) {
  console.log($(e.target).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1> Python</h1>
        <p id="cont">blabla</p>
      </div>
    </div>

    <div id="page-content" class="page-content">
      <div class="btn-group" id="page-buttons">
        <button type="button" class="btn btn-primary" value="first">First</button>
        <button type="button" class="btn btn-primary" value="last">Last</button>
      </div>
    </div>
  </div>
</div>

另一种方法是将侦听器附加到按钮本身，在这种情况下，您可以使用this来指代单击的按钮（侦听器所附加的元素）：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1> Python</h1>
        <p id="cont">blabla</p>
      </div>
    </div>

    <div id="page-content" class="page-content">
      <div class="btn-group" id="page-buttons">
        <button type="button" class="btn btn-primary" value="first">First</button>
        <button type="button" class="btn btn-primary" value="last">Last</button>
      </div>
    </div>
  </div>
</div>

接收具有相同类的元素的值

1 个答案: