Question

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

在我的HTML中，我得到了：

$(document).on "ready page:load", ->
  $("section.object").on "click", "#desc-link", (e) ->
    $("#object-desc").fadeToggle()
    e.preventDefault() // <-- prevents following the link

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

<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>

此时，我只是尝试获取我点击的每个按钮的值，但是当我点击任何按钮时，我在列中得到了一个数字文本（1到9）。我将不胜感激任何帮助。提前谢谢！

Answer 1

您尝试将点击事件添加到#highlightButtons，当您点击它时，javascript会获得 123456789 的文字。您需要将click事件添加到按钮。在这种情况下，您的选择器已更改为$('#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>

jquery获取按钮数组及其值

1 个答案: