如何获取单击它的按钮的值 jQuery - Javascript

当我们需要获取在网页上点击按钮时所获取的值，可以使用jQuery和Javascript来实现。下面将介绍如何获取单击按钮的值及相关代码示例。

HTML代码示例

首先，我们需要在HTML代码中定义需要单击的按钮及其对应的值。

<button class="btn" data-value="1">按钮1</button>
<button class="btn" data-value="2">按钮2</button>
<button class="btn" data-value="3">按钮3</button>

jQuery代码示例

我们可以使用jQuery来获取按钮单击事件并获取其对应的值。

$(document).ready(function() {
  $(".btn").click(function() {
    var value = $(this).data('value');
    alert("按钮值是 " + value);
  });
});

上述代码中，“$(document).ready()”函数是jQuery的初始化函数，用于在页面加载完成后执行代码。在这个函数中，我们使用了“$(".btn").click()”来绑定按钮的单击事件。当按钮被单击时，会执行函数内的代码，使用“$(this)”来获取当前单击的按钮，使用“$(this).data('value')”来获取按钮的值。最后，使用“alert()”函数来显示出获取到的值。

Javascript代码示例

如果你不想使用jQuery，你也可以使用原生的Javascript来获取按钮的值。

window.onload = function() {
  var buttons = document.getElementsByClassName("btn");

  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var value = this.getAttribute("data-value");
      alert("按钮值是 " + value);
    });
  }
}

上述代码中，“window.onload”函数类似于jQuery的“$(document).ready()”函数，用于在页面加载完成后执行代码。在函数内，我们使用“document.getElementsByClassName()”函数来获取所有的按钮，然后使用一个for循环来遍历所有按钮并绑定单击事件。当按钮被单击时，会执行函数内的代码，并使用“this.getAttribute()”来获取按钮的值。最后，使用“alert()”函数来显示出获取到的值。

总结

无论使用jQuery还是Javascript，获取单击按钮的值都是可以实现的。代码示例中，我们使用了“$(this)”或“this”来获取当前单击的按钮，并使用“$(this).data('value')”或“this.getAttribute('data-value')”来获取其对应的值。这些代码可以轻松地嵌入到你自己的网页中，帮助你更好地获取按钮的值。