Home Ask Login Register

Developers Planet

Your answer is one click away!

ani_css February 2016

how toggleClass work?

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.

Answers


Matt Burland February 2016

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


dextermini February 2016

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>

Post Status

Asked in February 2016
Viewed 3,662 times
Voted 9
Answered 2 times

Search




Leave an answer


Quote of the day: live life