admin管理员组文章数量:1323317
Help Needed
I have some sets of divisions available, where all of the div's are with the same classes. Each div contains a button and some other div's.
<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 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 on the button inside the div, the div with 'box-small' class has to be changed. 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 on the button, styles for all the divs are changing. I want to change the current divs class only.
You can find the Fiddle for the same here /
Your valuable help will be appreciated. Thanks
Help Needed
I have some sets of divisions available, where all of the div's are with the same classes. Each div contains a button and some other div's.
<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 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 on the button inside the div, the div with 'box-small' class has to be changed. 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 on the button, styles for all the divs are changing. I want to change the current divs class only.
You can find the Fiddle for the same here http://jsfiddle/om749rbd/6/
Your valuable help will be appreciated. Thanks
Share asked Apr 21, 2015 at 6:38 ramojurajuramojuraju 611 silver badge5 bronze badges7 Answers
Reset to default 3Your use of closest()
is incorrect, try giving it a selector instead of a function. From there you can use $this.find()
to get the .box-small
elements. You can also use toggleClass()
to change between the classes on each successive click. Try this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest('.box').find('.box-small').toggleClass('yellow red');
});
Updated fiddle
In your click
event handler add the following code.
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
This will find the closest parent having class box
and then find the descendant having class box-small
and then change the class of this element.
Demo
$('.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./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>
Use .siblings()
in jquery .closest()
is not 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');
});
Fiddle
Use can use $this selector(if HTML structure doesnt change) to get the next sibling like this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$this.next().next().removeClass('yellow');
$this.next().next().addClass('red');
});
});
Update fiddle: http://jsfiddle/om749rbd/11/
Try using $(this).closest()
to get the parent div and then target the specific div using find()
Check the CODE
$('.changecolo').click(function () {
var $this = $(this);
var boxSmall = $this.closest('div').find('.box-small');
boxSmall.removeClass('yellow').addClass('red');
});
$('.changecolo').click(function () {
var that = $(this).siblings('.box-small');
$(that).removeClass('yellow');
$(that).addClass('red');
});
updates demo
try this
Script
$('.changecolo').click(function () {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
本文标签: javascriptOn Click Change Multiple Div Classes in Current Div OnlyStack Overflow
版权声明:本文标题:javascript - On Click Change Multiple Div Classes in Current Div Only - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742143223a2422675.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论