[英]Why doesn't jQuery's addClass work for me?
I've been looking around but can't seem to find a solution to my problem, despite the many many questions there already are about this subject. 我一直在环顾四周,但似乎无法找到解决我的问题的方法,尽管已经有很多关于此主题的问题。
I am trying to use jQuery's addClass
to change the appearance of my dynamically generated navigation bar as well as a static div I have across the website. 我正在尝试使用jQuery的
addClass
来更改我动态生成的导航栏以及网站上的静态div的外观。
However a few weird things are occuring, here is my code: 但是发生了一些奇怪的事情,这是我的代码:
jQuery: 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");
};
Relevant HTML 相关HTML
<div style="width:50px; height:100px" id="box" div>
CSS: CSS:
.active1{
background:red !important;
}
.active2{
background:blue !important;
}
.active3{
background:yellow !important;
}
The first weird problem is that it only recognizes when body has the class "page-id-12" and not the other two occurrences; 第一个怪异的问题是,它仅在body具有类别“ page-id-12”时才识别,而在其他两个事件中则不识别; unfortunately I can't give you a link as I am developing on localhost.
不幸的是,我在localhost上开发时无法给您链接。
The second and biggest problem is that it does not add the class to the #box div which I am currently testing it on. 第二个也是最大的问题是它没有将类添加到当前正在对其进行测试的#box div中。
Am I drunk or is there actually some weird stuff going on here? 我喝醉了吗,或者实际上这里发生了一些奇怪的事情?
Added my full html: 添加了我的完整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(); ?>
Here is an answer to the most recent comment (how to do it with css) 这是最新评论的答案(如何使用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;
}
After minor modififying of HTML Layout to validly close div
everything works well. 在对HTML布局进行较小的修改以有效地关闭
div
一切正常。 I've updated html from: 我从以下位置更新了HTML:
<div style="width:50px; height:100px" id="box" div>
To 至
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.