為什么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