html - jquery toggleClass changing only once -

-

i making slideshow jquery. i'm using jquery ui icons play/pause button , on. have code:

$(function(){     $(".controls").hide(); //hide controls      $(".slider").hover(function(){         $(".controls").fadein(500);     }, function(){         $(".controls").fadeout(500);     }); // show controls on hover      $(".play").click(function(){         $(".slider").attr({'data-running' : 'true', 'data-paused' : 'false'});         $(this).toggleclass("ui-icon-play ui-icon-pause play pause");     });      $(".pause").click(function(){         $(".slider").attr({'data-running' : 'false', 'data-paused' : 'true'});         $(this).toggleclass("ui-icon-play ui-icon-pause play pause");     }); //add play/pause functionality  });

html:

<div class="slider-wrap"> <div class="slider" data-running="false" data-paused="true">     <img class="starter-img" src="http://images.freeimages.com/images/previews/e16/tree-1533498.jpg" />     <a href="http://labs.blogs.com/.a/6a00d8341caed853ef016768796ee4970b-pi" role="img-data"></a>     <a href="http://www.successconnections.com/articles/wp-content/uploads/2013/04/technology.jpg" role="img-data"></a>     <span class="controls">         <span class="ui-icon ui-icon-circle-triangle-w prev control"></span>         <span class="ui-icon ui-icon-play play control"></span>         <span class="ui-icon ui-icon-circle-triangle-e seek-for control">     </span> </div> </div>

the first time click on play button, switches data-running attribute true, data-paused attribute false, , it's own class ui-icon-pause pause, should. when click again, it's own class changes, data-running , data-paused don't change. why aren't attribute changes being made? fiddle

the $(".pause") not bind when flip classes. finds elements there @ moment in time. either use event delegation or add logic inside 1 click handles both states.

event delegation:

$(".controls").on("click", ".play", function(){     $(".slider").attr({'data-running' : 'true', 'data-paused' : 'false'});     $(this).toggleclass("ui-icon-play ui-icon-pause play pause"); });  $(".controls").on("click", ".pause", function(){     $(".slider").attr({'data-running' : 'false', 'data-paused' : 'true'});     $(this).toggleclass("ui-icon-play ui-icon-pause play pause"); }); //add play/pause functionality

better in 1 since code 95% same

$(".controls").on("click", ".play", function(){     $(this).toggleclass("ui-icon-play ui-icon-pause play pause");     var ispaused = $(this).hasclass("pause");     $(".slider").attr({'data-running' : !ispaused, 'data-paused' : ispaused}); });

Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more