Question

我最近在学习JS / jQuery，我需要帮助将单独的样式/类应用到顶部div中，当单击其中的按钮时，问题是html具有不同的部分，具有相同的按钮和祖先上的同一个类，我希望仅应用到包含触发按钮的实际div。

HTML：

<div class="class">
    <div>
        <div>
            <button data-action="action">

<div class="class">
    <div>
        <div>
            <button data-action="action">

SCRIPT：

$('[data-action="action"]').click(function() {
    $(".class").addclass("new-class")
})

使用此代码，new-class显然适用于所有现有的class类，无论激活的按钮如何。

谢谢！

Answer 1

使用以下代码：

$('[data-action="action"]').click(function() {
    $(this).closest('.class').addclass("new-class")
})

Answer 2

使用“最近”选择传递了选择器的第一个祖先（在这种情况下，第一个祖先带有“class”classname）。 $（this）选择器适用于单击的特定元素，在本例中为。

$('[data-action="action"]').click(function() {
    $(this).closest(".class").addclass("new-class")
})

Answer 3

您可以找到所点击元素的父级：

$('[data-action="action"]').click(function() {
    $this.parents(".class").addclass("new-class")
})

Answer 4

您可以为div提供id以及类为..

<div class="class" id = "my_id">
<div>
    <div>
        <button data-action="action">

<div class="class">
<div>
    <div>
        <button data-action="action">

SCRIPT：

$('[data-action="action"]').click(function() {
$("#my_id .class").addclass("new-class")

}）

试试这个会起作用

单击按钮仅为其顶级祖先应用事件

4 个答案: