Javascript 如果父级有类，则将类添加到其他div

我需要向

img

元素（对于动画）添加一个类如果“图像显示检查”的父级有一个活动类，我该如何做

---

澄清：父类并不总是具有“活动”属性，当元素进入视口时会添加该类。

HTML

<div class="active">
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
            <img>
        </div>
    </div>
</div>

---

试试这一款，它很管用。您可以检查代码段的输出。

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
if（$（“.image-reveal-inner”）.parent（）.hasClass（'image-reveal-check'））{
$（“.image-reveal-internal img”）.addClass（'image-reveal-start-add'）；
console.log（“完成！”）；
}
});

自闭症
当
活动类添加到
div
时，可以显式触发事件

在这里，我添加了一个按钮单击，在您的情况下，可以在视口中添加元素时执行此操作


$（“#addClassActive”）。单击（函数（）{
//单击此处按钮，活动类将添加到div。对于您的情况，在将元素添加到视口时需要调用该类
$（'.image-reveal-check'）.parent（）.addClass（'active'）.trigger（'classChange'）；
});
$（'div:eq（0）'）。在（'classChange'，function（）{//查找根div并查找img并添加所需的类
$（this.find（“img”）.addClass（“图像显示开始”）
});
。图像显示开始
{
边框：实心1px红色；
宽度：50px；
高度：50px；
}

添加类
您可以在不使用JS的情况下实现这一点，只需在CSS代码中添加如下规则：

div.active .image-reveal-inner img { }

下面的示例显示了如何使用规则设置第一个具有
活动
类的父图像的动画，而不是在父
div
上没有
活动
类的第二个图像的动画


div.active.图像显示内部img{
位置：相对位置；
-webkit动画：正常的放松；
动画：浮动气泡2正常缓解；
}
@-webkit关键帧浮动气泡{
0% {
右：300px；
}
100% {
右：0px；
}
}
@关键帧浮动气泡{
0% {
右：300px；
}
100% {
右：0px；
}
}

考虑到父类，为什么不简单地应用该类的CSS？你把一件简单的事情搞得太复杂了。您是否有多个
。图像显示检查
？那么问题出在哪里？你的jquery代码不起作用？@temaniaf如果我忘了在原始帖子中添加一些说明，“活动”类get在视口中时会添加到父类中。我试图做的是在父类具有“active”类时为IMG触发一个带有动画的类。您只需执行此操作
.active.image discover internal IMG
。。顺便说一句，您不应该在img元素中使用after/before。您应该添加一个解释，以便OP了解问题和解决方案：）父类并不总是具有“active”，该类是在元素进入视口时添加的。您能解释代码和OP代码之间的差异吗？我现在已经更改了代码，请检查它是否工作正常。你更改了什么？解释、向我们展示、强调差异等
div.active .image-reveal-inner img { }