jquery toggleClass меняется только один раз

Question

Я делаю слайд-шоу с jQuery. Я использую значки jquery ui как кнопку воспроизведения/паузы и так далее. поэтому у меня есть этот код:

$(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> 

В первый раз я нажимаю на кнопку воспроизведения, он переключает атрибут data-running к true, атрибут для falsedata-paused, и это собственный класс до ui-icon-pause pause, как и должно быть. Но когда я нажимаю его снова, это собственные изменения класса, но data-running и data-paused не меняются. Почему не происходит изменение атрибута? FIDDLE

Answer 1

$(".pause") не связывается, когда вы переворачиваете классы. Он находит только те элементы, которые есть в тот момент времени. Либо используйте делегирование событий, либо добавьте логику в один клик, который обрабатывает оба состояния. Делегация

Событие:

$(".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 

Лучше всего сделать это в одном, так как код 95% те же

$(".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}); 
}); 

Answer 2

Ваши классы должны быть такими, как и паузы для воспроизведения и наоборот

$(".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 

Answer 3

Я думаю, что столкнулся с этой проблемой.

«Проблема с Тумблером JQuery является на самом деле, как вы указали, что добавить это инлайн стиль к элементу, который не удаляется до тех пор пока тумблера запускается снова» - https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle-display-none/

You необходимо сбросить .toggleClass или использовать .addClass и .removeClass для достижения вашего эффекта.

Если вы не хотите, чтобы создать функцию сброса для вашего .toggleClass и не использовать .addClass/.removeClass вы иногда Бегство с оберточной с setTimeout функцией. т.е. простой пример ниже:

$(document).ready(function(){ 
    $("button").click(function(){ 
    $(".wrap").toggleClass("fixed"); 

    setTimeout(function() { 
     $('.wrap').toggleClass('shift') 
    }, 20); 

    }); 
}); 

CodePen of above in action.(< вы существенно сброс)