javascript - how toggleClass work? -


i have interesting problem toggleclass();

i got 5 input image elements , want switch image (input src) using toggleclass don't understand why toggleclass not doing want ?

$(".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 , b images, when click image has b images , when click b images has images.

thanks.

you like:

$(".form-elements input[type='image']").on("click", function() {    var currsrc = $(this).attr("src");    // check if source ends "_pasif.png"    if (/_pasif.png$/.test(currsrc)) {      // if does, replace ".png"      $(this).attr("src", currsrc.replace(/_pasif.png$/, ".png"));    } else {      // if not, replace ".png" "_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 test if current src ends _pasif.png , if does, set src src without _pasif part. if doesn't add it. each click toggle 1 other. , if buttons following same naming convention, don't need worry button handling since doing replacing part of src (so don't care if it's d1, d2, or d3...)


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -