如何使用 jQuery 查找被点击元素的类?
概述
我们可以轻松找到被点击元素的类，JQuery 提供了各种方法，当元素被点击时，这些方法会返回元素的类名。JQuery 方法"attr()"和使用"this.className"属性有助于查找元素的类。为了进一步了解这些方法，我们将查看涵盖这两种方法的示例。类名是一个属性，它定义了标签内数据的组或类型。不同的标签或元素可以包含相同的类名，但在 ID 名称的情况下，只能有一个标签包含唯一的 ID 名称，因为多个标签或元素的 ID 名称不能相同。
语法
以下显示了查找被点击元素类的语法 -
$(this).attr("class");
$(selector).text(this.className);
this − 在上述语法中，"this"是一个关键字，它将当前元素声明为引用变量。
attr("class) − 此方法返回属性键的值。其中，attr() 方法将"class"属性作为参数传递，因为 attr() 将返回元素的类名。
selector − 选择器是任何被用户点击的元素，它可以是任何标签，例如 p、div、button 或任何其他标签。
this.className − 它返回被点击元素的类名，因为被点击元素的引用将存储在"this"关键字中，而 className 将返回元素的类名。
算法 1
步骤 1 - 在文本编辑器中创建一个 HTML 文件，并向其中添加 HTML 样板代码。
步骤 2 - 现在将 Jquery CDN(内容分发网络)链接添加到 HTML 文件的 head 标签中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
步骤 3 - 现在创建几个 HTML 按钮，并为其设置相应的类名。
<button class="reset">Reset Button</button> <button class="submit">Submit Button</button> <button class="clear">Clear Button</button> <button class="close">Close Button</button> <div></div>
步骤 4 - 现在添加页面布局的样式标签。
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
步骤 5 − 现在将 script 标签添加到 body 标签中。
<script></script>
步骤 6 − 现在使用 Jquery 选择器选择带有点击功能的按钮标签。
$("button").click(function(){})
步骤 7 − 现在使用 attr() 方法获取类名，并将类名设置为 div。
$("div").text($(this).attr("class"));
步骤 8 − 该函数已准备好返回被点击元素的类名。
示例 1
在此示例中，我们将使用 Jquery 的 attr("class") 方法来获取被点击元素的类名。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the button to get their respective class.</h3>
<button class="reset">Reset Button</button>
<button class="submit">Submit Button</button>
<button class="clear">Clear Button</button>
<button class="close">Close Button</button>
<div></div>
<script>
$("button").click(function(){
$("div").text($(this).attr("class"));
})
</script>
</body>
</html>
下图显示了上述示例的输出，其中 HTML 按钮分别显示为"重置按钮"、"提交按钮"、"清除按钮"和"关闭按钮"。这些元素还包含其各自名称的类属性。因此，当用户点击特定按钮时，它会返回如下图所示的绿色类名。因此，在下图中，用户点击"提交"按钮后，系统会以绿色显示类名"submit"。
算法 2
步骤 1 - 在文本编辑器中创建一个 HTML 文件，并向其中添加 HTML 样板代码。
步骤 2 - 现在将 Jquery CDN(内容分发网络)链接添加到 HTML 文件的 head 标签中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
步骤 3 − 现在使用列表标签及其各自的类名创建有序列表。
<ol> <li class="Frontend Technology">HTML, CSS and JavaScript</li> <li class="Backend Technology">NodeJs, ExpressJs</li> <li class="Programming Language">Java, Python and C++</li> <li class="API Testing">Postman</li> </ol> <div></div>
步骤 4 - 现在添加页面布局的样式标签。
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
步骤 5 − 现在将 script 标签添加到 body 标签中。
<script></script>
步骤 6 − 现在使用 Jquery 选择器选择带有点击功能的列表标签。
$("li").click(function(){})
步骤 7 − 现在使用"this.className"方法获取类名，并将类名设置为 div。
$("div").text(this.className);
步骤 8 − 该函数已准备好返回被点击元素的类名。
示例 2
在此示例中，我们将使用"this"关键字引用和 className 方法，该方法将在点击时返回当前元素的类名。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the list to get their class</h3>
<ol>
<li class="Frontend Technology">HTML, CSS and JavaScript</li>
<li class="Backend Technology">NodeJs, ExpressJs</li>
<li class="Programming Language">Java, Python and C++</li>
<li class="API Testing">Postman</li>
</ol>
<div></div>
<script>
$("li").click(function(){
$("div").text(this.className);
})
</script>
</body>
</html>
下图是上述示例的输出，其中显示了一些包含技术的列表。这些列表标签包含相应的类名作为技术名称，例如前端技术、后端技术、编程语言和 API 测试。因此，当用户点击第一个包含 HTML、CSS 和 JavaScript 的列表标签时，它会以绿色返回其类名"前端技术"。
结论
此功能在许多页面中用于提供动态行为，例如，在某些情况下，开发人员可能希望在点击某个类元素时触发该函数，从而简化 HTML 中作为 JavaScript 函数的 DOM 操作。在上述示例中，text() 方法在将输出显示为类名方面也发挥着重要作用。
