为什么jQuery的addClass对我不起作用？

Question

我一直在环顾四周，但似乎无法找到解决我的问题的方法，尽管已经有很多关于此主题的问题。

我正在尝试使用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>

CSS：

 .active1{
    background:red !important;
 }
 .active2{
    background:blue !important;
 }

 .active3{
    background:yellow !important;
 }

第一个怪异的问题是，它仅在body具有类别“ page-id-12”时才识别，而在其他两个事件中则不识别； 不幸的是，我在localhost上开发时无法给您链接。

第二个也是最大的问题是它没有将类添加到当前正在对其进行测试的#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(); ?>

Answer 1

这是最新评论的答案（如何使用CSS）

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

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

Answer 2

在对HTML布局进行较小的修改以有效地关闭div一切正常。 我从以下位置更新了HTML：

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

至

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

 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"); };

 .active1{ background:red !important; } .active2{ background:blue !important; } .active3{ background:yellow !important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class = "page-id-14"> <div style="width:50px; height:100px" id="box">Some text</div> </body>

为什么jQuery的addClass对我不起作用？

问题描述

2 个解决方案

解决方案1
2 2016-02-22 15:58:15

解决方案2
0 2016-02-22 15:35:40

为什么jQuery的addClass对我不起作用？

问题描述

2 个解决方案

解决方案1 2 2016-02-22 15:58:15

解决方案2 0 2016-02-22 15:35:40

解决方案1
2 2016-02-22 15:58:15

解决方案2
0 2016-02-22 15:35:40