为什么'；jQuery&x27；这是我的课堂作业吗？

我一直在四处寻找，但似乎找不到解决问题的办法，尽管关于这个问题已经有很多问题了

我正在尝试使用jQuery的

addClass

来更改动态生成的导航栏以及网站上的静态div的外观

然而，一些奇怪的事情正在发生，以下是我的代码：

jQuery：

if ($( "body" ).hasClass("page-id-14")) {
    $("#box").addClass("active1");
    alert("why is it not red?");
} else if ($("body").hasClass("page-id-12")) {
    $("#box").addClass("active2");
    alert("Why is it not blue?");
} else if ($("body").hasClass("page-id-10")) {
    alert("Why is it not yellow?");
    $("#box").addClass("active3");
};

相关HTML

<div style="width:50px; height:100px" id="box" div>

第一个奇怪的问题是，它只识别body何时具有类“page-id-12”，而不识别其他两个事件；不幸的是，我不能给你一个链接，因为我正在本地主机上开发

第二个也是最大的问题是它没有将类添加到我目前正在测试它的#box div中

我是喝醉了还是真的有什么奇怪的事

添加了我的完整html：

<div class="container-fluid">
    <div class="row" id="wrapper">
        <div class="col-md-2"></div>
        <div class="col-md-8">

            <div class="row"> <!-- Logo row -->
                <div class="col-md-12" id="logo"></div>
            </div>

                <div class="row" id="navbar"> <!-- Navigation row -->
                    <div class="col-md-12" id="m1">

                        <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
                    </div>
                   <!-- <div class="col-md-4" id="m2">Industrilakering</div>
                    <div class="col-md-4" id="m3">Gulvservice</div> -->
                </div>


                <div class="row"> <!-- Slider row -->
                    <div class="col-md-12" id="slider"></div>
                </div>



                <div class="row"> <!-- Main content row -->
                    <div class="col-md-4" id="sidebar">
                        <?php wp_nav_menu( array( 'theme_location' => 'malerservice' ) ); ?>
                    </div>
                    <div class="col-md-8" id="content">
                        <?php
                            if ( have_posts() ) : while ( have_posts() ) : the_post();
                                the_content();
                            endwhile;
                            else :
                                _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
                            endif;
                         ?>
                    </div>
                </div> <!-- Main Content -->


        </div> <!-- div col-md-8 -->


        <div class="col-md-2" id"=social">
            <a href="http:/www.faceboook.com"><div id="fbicon"></div></a>
        <a href="http:/www.google.dk"><div id="gplusicon"></div></a>

        </div>





    </div>

                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8" id="gallery">
                        <div style="width:50px; height:100px" id="box" ></div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
</div>  <!-- Container fluid -->





<?php get_footer(); ?>

---

在对HTML布局进行轻微修改以有效关闭

div后

一切正常。 我已从以下位置更新了html：

<div style="width:50px; height:100px" id="box" div>

.active1{
背景：红色！重要；
}
.active2{
背景：蓝色！重要；
}
.active3{
背景：黄色！重要；
}

一些文本

在对HTML布局进行轻微修改以有效关闭

div后

一切正常。 我已从以下位置更新了html：

<div style="width:50px; height:100px" id="box" div>

.active1{
背景：红色！重要；
}
.active2{
背景：蓝色！重要；
}
.active3{
背景：黄色！重要；
}

一些文本

以下是对最新评论的回答（如何使用css）

---

下面是对最近的评论（如何使用css）的回答

---

---

将

更改为

我创建了一个小提琴，它工作得非常好：您能确保在执行此代码时加载DOM吗？你能在你的帖子中添加相关的正文HTML吗？哦，是的。。。但是没有改变结果。我们看不到您的标签的类别，也不知道是否触发了任何警报，因为您实际上没有说过这些话。将

更改为

我创建了一个小提琴，它工作得非常好：您能确保在执行此代码时加载DOM吗？你能在你的帖子中添加相关的正文HTML吗？哦，是的。。。但是没有改变结果。我们看不到您的标签的类别，也不知道是否触发了任何警报，因为您实际上没有说过这些话。告诉OP他的代码工作没有用，他们会很有用。浏览器可以自行关闭div，因此它不应该是问题的一部分。这不是答案。它看起来对我很有用。如果OP说有些东西不起作用，然后给出一些代码，制作一个运行版本的代码，至少可以证明它起作用something@ChrisLear那么这应该是一个评论。@ChrisLear我同意你的看法。然而，我已经自动更正了html（我错过了编辑），即使我没有指出它。告诉OP他的代码工作没有用。浏览器可以自行关闭div，因此它不应该是问题的一部分。这不是答案。它看起来对我很有用。如果OP说有些东西不起作用，然后给出一些代码，制作一个运行版本的代码，至少可以证明它起作用something@ChrisLear那么这应该是一个评论。@ChrisLear我同意你的看法。然而，我已经自动更正了html（我错过了编辑），即使我没有指向它。太简单了！我怎么没想到呢。非常感谢。正是……简单又快速。太简单了！我怎么没想到呢。非常感谢。正是……简单而快速。

<div style="width:50px; height:100px" id="box">Some text</div>

body.page-id-14 #box{
    background-color:red;
}
body.page-id-12 #box{
   background-color:blue;
}

body.page-id-10 #box{
   background-color:yellow;
}