Jquery获取按钮及其值的数组

jquery get array of buttons and their values

本文关键字：数组 获取 按钮 Jquery      更新时间：2023-09-26

我是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);
    });
}());
在这一点上，我只是试图获得我单击的每个按钮的值，但是当我单击任何按钮时，我在Column中得到数字文本(1到9)。我将感激任何帮助。提前感谢!

你试图添加点击事件到#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>

相关文章：