[Solved] how toggleClass work?

by


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…)

solved how toggleClass work?