On Click Change Multiple Div Classes in Current Div only
Required help
I have several sets of divisions available where all divs have the same classes. Each div contains a button and some other divs.
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
and the css is used
.box {
width:100px;
height:100px;
display:block;
margin:5px;
float:left;
}
.box-small {
width:20px;
height:20px;
display:block;
margin:5px;
float:left;
}
.sb {
width:10px;
height:10px;
display:block;
margin:5px;
float:left;
}
.red {background-color:red;}
.yellow {background-color:yellow;}
.border{border:1px solid #000;}
Now when I click the button inside the div, the div with class "box-small" should be resized. It works with the following jQuery.
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$('.box-small').removeClass('yellow');
$('.box-small').addClass('red');
});
});
but the problem is when I click the button, the styles for all sections change. I only want to change the current div class.
You can find a Fiddle for the same here http://jsfiddle.net/om749rbd/6/
Your valuable help will be greatly appreciated. Thanks to
source to share
Your usage closest()
is wrong, try choosing a selector instead. From there you can use $this.find()
to get items .box-small
. You can also use toggleClass()
to switch between classes on each subsequent click. Try the following:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest('.box').find('.box-small').toggleClass('yellow red');
});
source to share
In your event handler click
add the following code.
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
This will find the closest parent that has a class box
, and then find a child that has a class box-small
, and then change the class of that element.
$('.changecolo').click(function() {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
.box {
width: 100px;
height: 100px;
display: block;
margin: 5px;
float: left;
}
.box-small {
width: 20px;
height: 20px;
display: block;
margin: 5px;
float: left;
}
.sb {
width: 10px;
height: 10px;
display: block;
margin: 5px;
float: left;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.border {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
source to share
Use .siblings()
in jquery .closest()
doesn't work in your context.
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').removeClass('yellow').addClass('red');
});
or
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').toggleClass('yellow red');
});
source to share
Usage can use $ this selector (if HTML structure doesn't change) to get next sibling like this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$this.next().next().removeClass('yellow');
$this.next().next().addClass('red');
});
});
Update script: http://jsfiddle.net/om749rbd/11/
source to share