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

Popular posts from this blog

android - net_scheduler holding wakelock -

i have observed on occasions, net_scheduler keeps acquiring wakelock repeatedly on short durations , prevents android device sleep. from logcat, not able obtain conclusive information why might happening. of gms services active. can suggest when there higher chance occur perspective of gms services. this seems coming gcmnetworkmanager , schedules network-oriented tasks, google play services able batch network operations across system. also if use more advanced scheduling firebase jobdispatcher , internally gcmnetworkmanager used.
Read more

sql - MySQL : Getting Entries from a many-to-many table -

i have following table, select records should have mentioned values. example select companyid should have 3 providerid 200,300,400. running query should retrun companyid 2. opposite of in . in advance ! companyid | providerid -------------------------------------- 1 100 2 200 3 500 4 600 2 300 2 400 7 100 do group by , select rows of 3 wanted employeeid values. use having make sure 3 different employeeid values. select companyid tablename employeeid in (200, 300, 400) group companyid having count(distinct employeeid) = 3 another approach double self join, 1 each employeeid. however, less flexible: select distinct t1.companyid (select companyid tablename employeeid = 200) t1 join (select companyid tablename employeeid = 300) t2 on t1.companyid = t2.companyid join (select companyid tablename employeeid = 400)...
Read more

java - Retrieving data from database using jsp (Hibernate + Spring + Maven) -

hello, guys. i'm trying retrieve data oracle database, nothing appears on screen. here userslist.jsp <%@page contenttype="text/html" pageencoding="utf-8"%> <!doctype html> <html> <head> <title>spring mvc hello world</title> </head> <body> <h2>all users in system</h2> <table border="1"> <tr> <th>user id</th> <th>login</th> </tr> <c:foreach items="${users}" var="user"> <tr> <td>${user.userid}</td> <td>${user.login}</td> </tr> </c:foreach> </table> </body> </html> it seems ok. , here spring controller userscontroller.java package com.controller; import com.database.users; import com.service.usersmanager; import java.util.list; impo...
Read more