Reputation: 129
I have the following HTML :
<div class="wrap">
div class="red" id="ch1">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>
<div class="wrap">
div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
...
<div class="green" id="ch..">Content</div>
</div>
and I am using the following script to change class on divs:
$(".red , .green").click(function(){
$(".green").not($(this)).removeClass("green").addClass("red");
$(this).toggleClass('red green');
});
I would like to have or all "red" or just ONE "green" div in EACH "wrap" without cancelling (convert to red) all Divs to all "wraps"
Upvotes: 2
Views: 69
Reputation: 896
$('.red, .green').on('click', function() {
$(".green").prop("class", "red");
$(".red").prop("class", "green");
}
Upvotes: 0
Reputation: 1
Try utilizing if... else
statement ; if clicked element has class .red
, toggle .green
to .red
inside of parent .wrap
, then toggle class from .green
to .red
. If clicked element has class .green
toggle class from .red
to .green
$(".red , .green").click(function(e) {
if ($(this).is(".red")) {
$(this).parent(".wrap").find(".green").toggleClass("red green")
.end().find(this).toggleClass("green red");
} else {
$(this).toggleClass("red green")
}
});
.red {
background-color: #CC0000;
}
.green {
background-color: #009900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="red" id="ch1">Content</div>
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>
...
<div class="wrap">
<div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
<div class="green" id="ch..">Content</div>
</div>
Upvotes: 0
Reputation: 388446
You need to target only the sibling elements while adding/removing class, not all green element
$('.red, .green').on('click', function() {
$(this).siblings(".green").removeClass("green").addClass("red");
$(this).toggleClass('red green');
});
.red {
color: red
}
.green {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="red" id="ch1">Content</div>
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>
<div class="wrap">
<div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
<div class="red" id="ch..">Content</div>
</div>
Or use event delegation model
$('.wrap').on('click', '.red, .green', function() {
$(this).siblings(".green").removeClass("green").addClass("red");
$(this).toggleClass('red green');
});
.red {
color: red
}
.green {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="red" id="ch1">Content</div>
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>
<div class="wrap">
<div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
<div class="red" id="ch..">Content</div>
</div>
Upvotes: 2