Javascript：如果是hasClass，那么是addClass

我是Javascript新手。我想在一个图像中添加一个'animated fadeInLeft'类，当div环绕它时有一个类'active'，并在div丢失它的'active'类时删除'animated fadeInLeft'类。不知怎么的，它不能正常工作

以下是javascript代码：

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

$（文档）.ready（函数（）{
if（$（'#section1'）.hasClass（'active'））{
$（'#blueleft'）.addClass（'animated fadeInLeft'）；
}
否则{
$（'#blueleft'）.removeClass（“动画fadeInLeft”）；
}
});

以下是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脚本，它将把“active”类添加到div部分。这没有问题。如果我选择放置'div.section'而不是'#section1'，整个脚本将运行，并将类添加到'#blueleft'。我可以从检查器中看到它，它也会显示动画，因为我使用的是animated.css。但如果我把“第1部分”放进去，那就行不通了。它不会添加“动画fadeInLeft”类。我需要使用id而不是class，因为我有其他div也有'section'类名，但它们有不同的id。有人知道问题出在哪里吗

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

if( $("div#section1.active").length ){
    $('#blueleft').addClass('animated fadeInLeft');
} else {
}

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

---

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

如果您有多个具有相同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");
    }
})

---

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

可以将另一个javascript中的代码粘贴到div section

#section1

没有

active

类，因此它运行

removeClass

来删除同样不存在的类。你期望发生什么？听起来您可能有重复的ID，这是无效的，只选择了第一个。

div class=“section active”ID=“section 1”>

“它不起作用”-这是什么意思？你如何确定它是否有效？您是否使用DOM检查器查看元素分配给的类？（听起来你是在测试是否应用了CSS更改，这可能意味着你遇到了一个特殊性问题，在没有看到CSS的情况下无法调试）。是的，你的脚本将在加载文档时运行一次。如果以编程方式添加“.active”类，则之后还必须执行If语句。是否可以将另一个javascript中的代码粘贴到div section

#section 1

没有

active

类，因此它运行

removeClass

来删除同样不存在的类。你期望发生什么？听起来您可能有重复的ID，这是无效的，只选择了第一个。

div class=“section active”ID=“section 1”>

“它不起作用”-这是什么意思？你如何确定它是否有效？您是否使用DOM检查器查看元素分配给的类？（听起来你是在测试是否应用了CSS更改，这可能意味着你遇到了一个特殊性问题，在没有看到CSS的情况下无法调试）。是的，你的脚本将在加载文档时运行一次。如果您以编程方式添加“.active”类，您还必须在之后执行If语句。为什么您在这个差异帮助游戏中所做的更改？为什么您在差异帮助游戏中所做的更改？“因为您有多个ID相同的div”-您怎么会这样想？问题没有在代码中显示重复的id，在id中使用数字意味着id是唯一的。@Quentin在问题中提到，他有一些其他div也被命名为'section'，因此我认为如果对多个div具有相同的id，他需要在每个循环中使用。谢谢。代码显示“section”是一个类名，而不是id“因为您有多个具有相同id的div”-您怎么会这样想？问题没有在代码中显示重复的id，在id中使用数字意味着id是唯一的。@Quentin在问题中提到，他有一些其他div也被命名为'section'，因此我认为如果对多个div具有相同的id，他需要在每个循环中使用。谢谢。代码显示“section”是一个类名，而不是id