Javascript 在最近的父类中切换类

所以我有一个jquery，我需要使它工作。但是通过所有的父母和孩子，我无法到达我想要的地方

我的目标是当我点击按钮时，类图标交叉，切换到图标勾号

（在下面的代码片段中，为了更好地解释，我举了一个例子。在本例中，我想更改矩形的颜色）

$（函数（）{
$（“.addOpt”）。单击（函数（e）{
$（this）.text（函数（i，text）{
返回文本==“添加”？“删除”：“添加”；
});
$（this.toggleClass（“btn主btn删除”）；
//问题在于以下几行：
$（this）.closed（“.quoteCompare”）.children（“.quotecompareinide”）.p.toggleClass（“图标勾号图标十字”）；
e、 预防默认值（）；
});
})

。图标交叉{
宽度：50px；
高度：10px；
背景颜色：绿色；
}
.图标勾号{
宽度：50px；
高度：10px；
背景色：红色；
}

10欧元
添加

您应该将

p

作为选择器，而不是属性：

$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').toggleClass("icon-tick icon-cross");

如果只想获取第一个

p

元素，可以使用以下方法：

编辑：

请注意，最近的

quoteCompare

将返回第二个div，其中包含类

medium-6 xsmall-12 small-12 column quoteCompare

，因此您可能还应该在代码中使用：

$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");

$（函数（）{
$（“.addOpt”）。单击（函数（e）{
$（this）.text（函数（i，text）{
返回文本==“添加”？“删除”：“添加”；
});
$（this.toggleClass（“btn主btn删除”）；
//问题在于以下几行：
$（this）.closest（“.quoteCompare”）.prev（）.children（“.quotecompareinide”）.find（'p'）.eq（0）.toggleClass（“图标勾选图标叉”）；
e、 预防默认值（）；
});
})

。图标交叉{
宽度：50px；
高度：10px；
背景颜色：绿色；
}
.图标勾号{
宽度：50px；
高度：10px；
背景色：红色；
}

10欧元
添加

您可以将

p

包含在

children（）

选择器中：

$（函数（）{
$（“.addOpt”）。单击（函数（e）{
$（this）.text（函数（i，text）{
返回文本==“添加”？“删除”：“添加”；
});
$（this.toggleClass（“btn主btn删除”）；
//问题在于以下几行：
$（this）.closed（“.quoteCompare”）。children（“.quoteCompareinide p”）。toggleClass（“图标勾号图标叉”）；
e、 预防默认值（）；
});
})

。图标交叉{
宽度：50px；
高度：10px；
背景颜色：绿色；
}
.图标勾号{
宽度：50px；
高度：10px；
背景色：红色；
}

10欧元
添加

我们需要遍历到

以获取相关的

标记。请看下面的片段：

$（函数（）{
$（“.addOpt”）。单击（函数（e）{
$（this）.text（函数（i，text）{
返回文本==“添加”？“删除”：“添加”；
});
$（this.toggleClass（“btn主btn删除”）；
//问题在于以下几行：
如果（$（this）.text（）=“删除”）
$（this）.closed（“.row”）.find（“p.icon-cross”）.toggleClass（“icon-tick-icon-cross”）；
其他的
$（this）.closed（“.row”）.find（“p.icon-tick”）.toggleClass（“icon-tick-icon-cross”）；
e、 预防默认值（）；
});
})

。图标交叉{
宽度：50px；
高度：10px；
背景颜色：蓝色；
}
.图标勾号{
宽度：50px；
高度：10px；
背景色：红色；
}

10欧元
添加

谢谢，我们已经到了，但仍然没有工作。@groseler看到我的更新答案和代码片段，你也应该在

$（这个）上调用
prev
。最接近（“.quoteCompare”）

完美。这就是问题所在。我已经照你说的做了，工作很顺利。非常感谢。5*我尝试了你的代码片段，但它不起作用。但这是另一种方法（在内部添加选择器）。谢谢你的建议。谢谢，另一个有趣的方法谢谢@groseler。。。！

$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");