Reputation: 1181
I have a basic HTML using bootstrap, container > row > col > div ID > panel in that order, the class is placed in div ID, the thing is that I need to remove that class from that DIV and put it in another DIV(the one you click on), I know how to check if the class exist in any div inside of a div but I don't know how to delete it from there and add it to another.
I have made a Fiddle to illustrate this question. When you load the page, the class is already there. If you click any of the boxes it will alert you that in fact the class exist but don't know which div has it. The idea is to remove the class from whaveter that might be and add it to the div you click.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
JS
$("#s1").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s2").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s3").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s4").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
Upvotes: 1
Views: 248
Reputation: 704
Here is a way to achieve what you required . What i have done with your code is
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1" class="divs">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection divs">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3" class="divs">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4" class="divs">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
CSS
.container {
max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
border: 1px solid black;
cursor: pointer;
}
.selection {
background-color: black;
padding:15px;
}
JQUERY
$(document).ready(function(){
$(".panel").on("click",function(){
var divid="#"+$(this).parent().attr("id");
$(".divs").removeClass("selection");
$(divid).addClass("selection");
});
});
Note that i have just added a simple class as "divs" to each of the parent div of the panel.
What i have done here is i have first got the id of the parent div of the panel which has been clicked by the user . Then i have removed the class "selection" from the parent divs "s1 s2 s3 s4" accessing it with the help of the common class "divs" . then i have added the class "selection" to the div which has been clicked.
Here is the DEMO for your reference.
NOTE: This code will work for any number of panels you create.
Upvotes: 1
Reputation: 208040
You can reduce your code to:
$("#s1,#s2,#s3,#s4").click(function () {
$(".selection").removeClass('selection');
$(this).addClass('selection');
});
In your example:
$(".selection")[0].removeClass('.selection');
doesn't need [0]
and there should be no period in the class you pass to removeClass()$(this)
if($(".selection")[0]) {
will always be true, so it didn't really make sense to use that as a condition.Upvotes: 3
Reputation: 9782
do it like this:
$("#s1").click(function() {
// Check class on the clicked section
if($(this).hasClass('selection') ) {
alert('Class exist');
// class found then remove it.
$(this).removeClass('.selection');
}
});
Take a look on these to know more: .hasClass(), .addClass(), .removeClass()
Upvotes: 0