如何使用JavaScript/jQuery获得被点击按钮的ID

要获取被点击按钮的ID，可以使用JavaScript或jQuery。以下是使用JavaScript和jQuery获取被点击按钮的ID的完整攻略：

使用JavaScript获取被点击按钮的ID

步骤一：创建结构

首先需要创建包要点击的按钮的HTML构。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
  <title>Get Clicked Button's ID</title>
</head>
<body>
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>
  <script src="script.js"></script>
</body>
</html>

在上述例中，我们创建了三个按钮，并为每个按钮分配一个唯一的ID。我们还在<head>签中引入了一个名为script.js的JavaScript文件。

步骤二：添加JavaScript代码

接下来，需要一些JavaScript代码来获取被点击按钮的ID。以下是一个示例：

// Get clicked button's ID
document.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    console.log(event.target.id);
  }
});

在上述示例中，我们使用addEventListener()方法在文档上添加一个点击事件监听器。用户单击文档中的任何元素时，事件监听器将检查该元素是否为按钮。如果是按钮，则使用console.log()方法记录按钮的ID。

使用jQuery获取被点击按钮的ID

步骤一：创建HTML结构

首先创建包含要点击的按钮的HTML结构。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
  <title>Get Clicked Button's ID</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>
  <script src="script.js"></script>
</body>
</html>

在上述例中，我们创建了三个按钮，并为每个按钮分配了一个唯一的ID。我们还在<head>标签中引入了jQuery库。

步骤二：添加代码

接下来，需要一些jQuery代码来获取被点击按钮的ID。以下是一个示例：

// Get clicked button's ID
$(function() {
  $("button").on("click", function() {
    console.log($(this).attr("id"));
  });
});

在上述示例中，我们使用on()方法在所有按钮上添加一个点击事件监听器。当用户单击任何按钮时，事件监听器将使用$(this)选择器获取被单击的按钮，并使用attr("id")方法获取该按钮的ID。最后，使用console.log()方法记录按钮的ID。

无论使用JavaScript还是jQuery，我们都可以获取被点击按钮的ID。使用JavaScript，我们可以使用addEventListener()方法在文档上添加一个点击事件监听器，并检查单击的元素是否为按钮。使用jQuery，我们可以使用on()方法在所有按钮上添加点击事件监听器，并使用$(this)选择器获取被单击的按钮。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用JavaScript/jQuery获得被点击按钮的ID - Python技术站