Question

我是Javascript的新手。我想添加一个动画fadeInLeft＆＃39;当div环绕它时，对一个图像的类有一个类＆＃39;活动＆＃39;并删除动画fadeInLeft＆＃39;当div失去它时，他就会上课“活跃”。类。不知怎的，它不能正常工作。

以下是javascript代码：

<script>
  $(document).ready(function() {
    if ( $('#section1').hasClass('active') ) {
      $('#blueleft').addClass('animated fadeInLeft');
    }
    else {
      $('#blueleft').removeClass("animated fadeInLeft");
    }
  });
</script>

这是HTML：

<div class="section" id="section1">
    <h2>Wireless Digital Music System</h2>
    <p>Streaming tracks</p>
    <img id="blueleft" class="blueleft" src="img/blueleft.png" alt="blueleft">
    <img id="blueright" class="blueright" src="img/blueright.png" alt="blueright">
</div>

我正在运行另一个Javascript脚本，它将添加＆＃39; active＆＃39;类到div部分。这没有问题。如果我选择放置＆div; div.section＆＃39;而不是＆＃39;＃section1＆＃39;，整个脚本将运行，并且它会将类添加到＆＃39;＃blueleft＆＃39;。我可以从检查器中看到它，也会显示动画，因为我正在使用animated.css。但是，如果我把＃section1＆＃39;放在＆＃39;＃section1＆＃39;它就不会工作。它不会添加动画fadeInLeft＆＃39;类。我需要使用id而不是class，因为我还有其他div也有＆＃39; section＆＃39;类名，但它们有不同的ID。有谁知道是什么问题？

Answer 1

如果您有多个具有相同ID的div，则这是无效的HTML，问题是当您使用 $（'＃elementId'）访问元素时，它将仅返回HTML中找到的第一个元素所以你需要使用每个循环，如下所示，

$('div[id^="section1"]').each(function(){
    if ($(this).hasClass('active') ) {
      $(this).find('#blueleft').addClass('animated fadeInLeft');
    }else {
      $(this).find('#blueleft').removeClass("animated fadeInLeft");
    }
})

这将找到 section1 id的所有元素，并将应用逻辑。

Javascript：如果是hasClass则addClass

1 个答案: