addClass method not working
Question
I am teaching myself jquery. I am trying for the first time to change elements of the dom using jquery. Particularly I am trying to use the method addClass to make a blue rectangle disappear. Here is the simple code:
html
<!DOCTYPE html>
<html>
<head>
<title>test slider</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<span id="rect"></span>
<p id="button"> click here </p>
</body>
</html>
css
#rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
}
.closed {
height: 0;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
jquery
$(document).ready(function(){
$("#button").click(function(){
$("#rect").addClass("closed");
});
});
I am expecting the rectangle to disappear when I click the text "click me", but nothing happens. I have checked with an alert box that everything else works.This is my first attempt so I expect it might be something pretty simple I am doing wrong. Any help appreciated.
3 answers
solution1
1 ACCPTED 2016-10-27 18:47:14
That's because of the specificity of your CSS selectors. You're trying to override an ID with a class. Which won't work because an ID has a higher level of specificity than a class.
# = ID
. = Class
The main thing here is to change up the specificity of your selectors and I have outlined a few options below.
Change ID to Class
Change #rect to .rect .
$("#button").click(function() { $(".rect").addClass("closed"); });
.rect { float: left; height: 400px; width: 550px; background-color: blue; } .closed { height: 0; } #button { float: right; margin-top: 200px; margin-right: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="rect"></span> <p id="button">click here</p>
Use a Different CSS Property
If you don't want to change up your ID then you you could have .closed apply a property that #rect has not set, but would also hide the element like display: none; .
$("#button").click(function() { $("#rect").addClass("closed"); });
#rect { float: left; height: 400px; width: 550px; background-color: blue; } .closed { display: none; } #button { float: right; margin-top: 200px; margin-right: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="rect"></span> <p id="button">click here</p>
Increase CSS Selector Specificity
Per the comments below you could change one of your selectors to make it more specific.
Change .closed to #rect.closed (no space between the t and . ). This will target an element with an ID of #rect and a class of .closed .
$("#button").click(function() { $("#rect").addClass("closed"); });
#rect { float: left; height: 400px; width: 550px; background-color: blue; } #rect.closed { height: 0; } #button { float: right; margin-top: 200px; margin-right: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="rect"></span> <p id="button">click here</p>
solution2
0 2016-10-27 18:51:50
Because you are using an ID for your span and a class to add the class refuses to overwrite the ID's height. One way to correct this is using !important which demands it to overwrite anything else determining the height for that element. Another way would be to have two classes that you toggle
Toggle Method:
$(document).ready(function(){
$("#button").click(function(){
$("#rect").toggleClass("closed open");
});
});
Important Method:
.closed {
height: 0!important;
}
solution3
0 2016-10-27 18:52:46
If you're just trying to make the rectangle invisible you could try setting the display property to none:
#rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
.closed {
display: none;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.