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
Post a Comment