javascript - 如果父级有类将类添加到其他 div

Question

如果“image-reveal-check”的父级有一个活动类，我需要向img元素（用于动画）添加一个类，我该怎么做？

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

HTML

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

jQuery

if ($(".image-reveal-check").parent().hasClass('active')) {
    $(".image-reveal-inner img").addClass('image-reveal-start');
}

Answer 1

试试这个，它正在工作。您可以检查代码片段上的输出。

$( document ).ready(function() {
console.log( "ready!" );
if ($(".image-reveal-inner").parent().hasClass('image-reveal-check')) {
	$(".image-reveal-inner img").addClass('image-reveal-start-add');
	console.log( "done!" );
}
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Answer 2

当active类添加到div.

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

$("#addClassActive").click(function() { 

//Here on button click the active class is added to div. For your case this needs to be called when the element added to the viewport
    $('.image-reveal-check').parent().addClass('active').trigger('classChange');
});

$('div:eq(0)').on('classChange', function() { //finding the root div and finding img and adding the desired class
     $(this).find("img").addClass("image-reveal-start")
});

.image-reveal-start
{
 border: solid 1px red;
 width: 50px;
 height: 50px;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
            <img src="#" title="I am Image!" alt="I am Image!" />
            
            <button id="addClassActive">Add Class</button>
        </div>
    </div>
</div>

Answer 3

您可以完全不使用 JS 来实现这一点，只需在您的 CSS 代码中添加一条规则，例如：

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

下面的示例显示了第一个具有activeclass 的 parent 的图像将如何使用规则进行动画处理，而不是第二个在 parent 上没有activeclass 的图像div。

div.active .image-reveal-inner img {
  position: relative;
  -webkit-animation: floatBubble 2s normal ease-out;
  animation: floatBubble 2s normal ease-out;
}

@-webkit-keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

@keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

<div class="active">
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.stack.imgur.com/2lRQ9.png">
    </div>
  </div>
</div>

<div>
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.stack.imgur.com/2lRQ9.png">
    </div>
  </div>
</div>