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

第一个奇怪的问题是它只识别身体有“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 style="width:50px; height:100px" id="box">Some text</div>之后一切正常。我已经更新了html：

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

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

为什么jQuery的addClass不适合我？

2 个答案: