CODEWITHSUNDEEP
javascriptjqueryhtml
theok
theok

Reputation: 129

JQuery toggle and remove css classes in multiple divs

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

Answers (3)

Deepesh kumar Gupta
Deepesh kumar Gupta

Reputation: 896

$('.red, .green').on('click', function() { 
  $(".green").prop("class", "red");
  $(".red").prop("class", "green");
}

Upvotes: 0

guest271314
guest271314

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

Arun P Johny
Arun P Johny

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

Related Questions