how toggleClass work?

Question

I have interesting problem with toggleClass();

I got 5 input image elements and I want to do switch image (input src) using toggleClass but I don't understand why toggleClass is not doing that I want to do ?

$(".form-elements input[type='button']").on("click", function() {
 
  var el = $(this).attr("class");
 if(el=="d1"){
   $(".d1").toggleClass('d1 d1_pasif');
  
}else if(el=="d2"){
  
 $(".d2").toggleClass('d2 d2_pasif');
 
}else if(el=="d3"){
   
  $(".d3").toggleClass('d3 d3_pasif');

}else if(el=="d4"){
  
  $(".d4").toggleClass('d4 d4_pasif'); 
 
 } else if(el=="d5"){
   
  $(".d5").toggleClass('d5 d5_pasif');
  
 }
  return false; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="http://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="http://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="http://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="image" name="d1" class="d1" src="http://anitur.streamprovider.net/images/otel-filtre/d1.png" />
</div>

I have a and b images, When I click a image it has to be b images and when I click b images it has to be a images.

thanks.

Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Feb 08 '16 at 16:21
Read the [documentation](http://api.jquery.com/toggleclass/). — Alex W, Feb 08 '16 at 16:22
friends thanks I understand but is there any way to do ? switch input images ? — ani_css, Feb 08 '16 at 16:23
@ani_css: There are lots of ways you could approach it. You could check the current `src` attribute for the `_pasif.png` ending and if it's there, remove it, if it's not, add it. — Matt Burland, Feb 08 '16 at 16:24
@MattBurland I edited my JS codes I did it but not switch ,after img changed second click must be default img ? — ani_css, Feb 08 '16 at 16:27
You should be checking `if($(...).hasClass(...))` before you run `$(this).addClass(...)` or it will always have that class. — Alex W, Feb 08 '16 at 16:58
When you edit the code in the question, you should also edit the title and explanation. If you're not using `toggleClass` anywhere in the code, why do you still ask about it in the title? — Barmar, Feb 08 '16 at 17:08
@MattBurland I mean; I have a and b images, When I click a image it has to be b images and when I click b images it has to be a images. — ani_css, Feb 09 '16 at 06:59
@ani_css: And I gave you some code for one way you could do that. Put it in the click handler. You need to figure out what the current image is (by looking at the `src`) and then figure out which one you need to change it to. — Matt Burland, Feb 09 '16 at 16:11

Matt Burland · Accepted Answer · 2016-02-09T16:21:34.217

You could do something like:

$(".form-elements input[type='image']").on("click", function() {
  var currSrc = $(this).attr("src");
  // check if the source ends with "_pasif.png"
  if (/_pasif.png$/.test(currSrc)) {
    // if it does, just replace it with ".png"
    $(this).attr("src", currSrc.replace(/_pasif.png$/, ".png"));
  } else {
    // if it does not, replace ".png" with "_pasif.png"
    $(this).attr("src", currSrc.replace(/.png$/, "_pasif.png"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="http://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="http://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="http://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="image" name="d1" class="d1" src="http://anitur.streamprovider.net/images/otel-filtre/d1.png" />
</div>

Basically you test if the current src ends with _pasif.png and if it does, you set the src to the src without that _pasif part. If it doesn't you add it. Each click would then toggle from one to the other. And if all the buttons are following the same naming convention, you don't even need to worry about which button you are actually handling since all you are doing is replacing part of the src (so I don't care if it's d1, d2, or d3...)

score 0 · Answer 2 · answered Feb 08 '16 at 18:34

please find JSfiddle similar to what solution you are looking for, just play around it.

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Code snippet are as follow :

$(".form-elements input[type='button']").on("click", function() {
  debugger;
  var el = $(this).attr("class");
  //if(el=="d1"){
  $(this).toggleClass('d1 d1_pasif');
  //}

  return false;
});

.d1 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}
.d1_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="https://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="https://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="https://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="https://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="button" name="d1" class="d1" />

</div>

heey it's great but if I set if conditional my codes are not work for I edited my JS codes you can see above — ani_css, Feb 09 '16 at 07:45

how toggleClass work?

2 Answers2