Javascript:如果 hasClass 然后 addClass

Question

我是 Javascript 新手。我想在图像周围的 div 包装有一个类“事件”时向图像添加一个“动画淡入淡出”类，并在 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 脚本，它将“事件”类添加到 div 部分。这没有问题。如果我选择放置“div.section”而不是“#section1”，整个脚本将运行，并将类添加到“#blueleft”。我可以从检查器中看到它，它还会显示动画，因为我使用的是 animated.css。但是，如果我输入“#section1”，它将不起作用。它不会添加“动画 fadeInLeft”类。我需要使用 id 而不是 class 因为我有其他 div 也有“部分”类名，但它们有不同的 id。有谁知道是什么问题？

Answer 1

如果您有多个具有相同 ID 的 div，则这是无效的 HTML，问题是当您使用 $('#elementId') 访问元素时，它将仅返回在 HTML 中找到的第一个元素所以你需要使用 for each loop 如下，

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

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