javascript - jquery 获取按钮数组及其值

Question

我是 JS 和 Jquery 新手。我一直在尝试为同一类中的所有按钮设置一个事件，同时我正在尝试获取每个按钮的值。

在我的 HTML 中我得到:

<div id="highlightButtons">
    <button type="button" class="btn btn-primary" value="1">1</button>
    <button type="button" class="btn btn-primary" value="2">2</button>
    <button type="button" class="btn btn-primary" value="3">3</button>
    <button type="button" class="btn btn-primary" value="4">4</button>
    <button type="button" class="btn btn-primary" value="5">5</button>
    <button type="button" class="btn btn-primary" value="6">6</button>
    <button type="button" class="btn btn-primary" value="7">7</button>
    <button type="button" class="btn btn-primary" value="8">8</button>
    <button type="button" class="btn btn-primary" value="9">9</button>
</div>

在我的 JS 中我尝试了这个:

(function() {
    'use strict'
    var all_hl_btns = $('#highlightButtons');
    all_hl_btns.click(function(){
        var value = $(this).text();
        alert(value);
    });
}());

此时，我只是尝试获取单击的每个按钮的值，但是当我单击任何按钮时，我会在列中看到数字文本(1 到 9)。我将不胜感激任何形式的帮助。预先感谢您!

Answer 1

您尝试将点击事件添加到#highlightButtons，当您点击它时，javascript 获取的文本为123456789。您需要为按钮添加点击事件。在这种情况下，您的选择器更改为 $('#highlightButtons > button')

(function() {
    'use strict'
    var all_hl_btns = $('#highlightButtons > button');
    all_hl_btns.click(function(){
        var value = $(this).text();
        alert(value);
    });
}());

var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
  var value = $(this).text();
  console.log(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
      <button type="button" class="btn btn-primary" value="1">1</button>
      <button type="button" class="btn btn-primary" value="2">2</button>
      <button type="button" class="btn btn-primary" value="3">3</button>
      <button type="button" class="btn btn-primary" value="4">4</button>
      <button type="button" class="btn btn-primary" value="5">5</button>
      <button type="button" class="btn btn-primary" value="6">6</button>
      <button type="button" class="btn btn-primary" value="7">7</button>
      <button type="button" class="btn btn-primary" value="8">8</button>
      <button type="button" class="btn btn-primary" value="9">9</button>
    </div>