JQuery toggleClass only changes once
I am doing slideshow with jQuery. I am using jquery ui icons like play / pause button and so on. so I have this 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 I click the play button, it toggles the attribute data-running
on true
, the attribute data-paused
on false
, and the native class on ui-icon-pause pause
, as it should. But when I click on it again, it has its own class changes, but data-running
it data-paused
doesn't change either. Why isn't the attribute change happening? FIDDLE
source to share
$(".pause")
does not bind when switching classes. He finds only those elements that are at that moment in time. Either use event delegation, or add one-click logic that handles both states.
Delegation event:
$(".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
It's better to just do it in one, since the code is 95% the 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});
});
source to share
Your classes should be like pause for play and vice versa
$(".play").click(function(){
$(".slider").attr({'data-running' : 'true', 'data-paused' : 'false'});
$(this).toggleClass("ui-icon-play ui-icon-play play");
});
$(".pause").click(function(){
$(".slider").attr({'data-running' : 'false', 'data-paused' : 'true'});
$(this).toggleClass("ui-icon-play ui-icon-pause pause");
}); //Add play/pause functionality
source to share
I think I ran into this problem.
"The problem with jQuerys Toggle is really that you pointed out that this adds inline style to the element, which is not removed until the toggle is fired again" - https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle -display-none /
You need to reset .toggleClass
or use .addClass
and .removeClass
to achieve effect.
If you don't want to create a reset function for yours .toggleClass
and don't use .addClass
/ .removeClass
, you can sometimes get away with the wrapper with a function setTimeout
. i.e. simple example below:
$(document).ready(function(){
$("button").click(function(){
$(".wrap").toggleClass("fixed");
setTimeout(function () {
$('.wrap').toggleClass('shift')
}, 20);
});
});
CodePen above in action . (<you are essentially rebooting)
source to share