Скрытие второй кнопки воспроизведения / паузы

Question

Я делаю кнопку воспроизведения / паузы для моего слайдера. У меня это работает, и это прекрасно. Почти. Небольшая проблема, с которой я столкнулся (я уверен, что есть быстрое решение) состоит в том, что я хочу показать только одно изображение воспроизведения / паузы, которое переключало бы классы при нажатии. Мои изображения работают, но так как я создаю два класса для воспроизведения и паузы, у меня рядом с ползунком появляются два изображения с одинаковой функцией! Как скрыть (избавиться) от второго изображения при сохранении функциональности второго? Я не могу просто удалить второй класс ul из моего HTML, так как я присваиваю ему атрибуты, но я не могу понять, как его не показывать. Я пробовал искать в Интернете, но ни одно из решений не решает мою конкретную проблему.

Вот код:

HTML

<div id='autocontrols'>
    <ul class="bx-start">
    </ul>
    <ul class="bx-stop">
    </ul>
</div>

Javascript

$('#autocontrols').on("click", '.bx-start', function(){
      alert("Starting!");
      main_slider.startAuto();
 });

$('#autocontrols').on("click", '.bx-stop', function(){
    alert("Stoping!");
    main_slider.stopAuto();
 });

 $('#autocontrols ul').bind("click", function() {
    if ($(this).attr("class") == "bx-start")
       $(this).attr("class", "bx-stop");
    else
       $(this).attr("class", "bx-start");
  });   

CSS

/*auto start button*/
ul.bx-start {
    background: image-url("pause.png") no-repeat 0 0;
    height: 50px;
}

/*auto stop button*/
ul.bx-stop {
    background: image-url("play.png") no-repeat 0 0;
    height: 50px;
}

Answer 1

демоверсия jsBin

Прежде всего
<ul> тег предназначен не для использования в качестве кнопки, а скорее для содержания <li> элементы списка
так что вам нужно что-то вроде этого:

<span class="control start"></span>

с соответствующим CSS:

/* auto buttons */
.control{
  display:inline-block;
  width:50px;
  height:50px;
}
.start { background: url("play.png") no-repeat 0 0;}
.stop  { background: url("stop.png") no-repeat 0 0;}

чем требуемый jquery становится довольно тривиальным:

$('.control').click(function(){

  // First toggle the class
  $(this).toggleClass('start stop');

  // now booleanize the current class
  var isPlay = $(this).hasClass('start');

  if(isPlay){
     // do something like: main_slider.startAuto();
  }else{
     // do something like: main_slider.stopAuto();
  }

}); 

Приведенный выше код является настолько гибким, что позволяет вам даже запускать автовоспроизведение при загрузке документа, назначая HTML как:

<span class="control stop"></span> <!-- autoplaying so we need a stop class -->

и все вышеперечисленное будет работать даже для этого конкретного случая.

Answer 2

Этот пример будет переключать видимость элементов. Установите начальное свойство отображения .bx-stop в none,

CSS:

.bx-start   { background: url( "play.png" ) no-repeat 0 0; height: 50px; }
.bx-stop    { background: url( "pause.png" ) no-repeat 0 0; height: 50px; display: none; }

HTML:

<div id='autocontrols'>
    <ul class="control bx-start"></ul>
    <ul class="control bx-stop"></ul>
</div>

Javascript:

$( '#autocontrols .control' ).on("click", function() {                
    $( '.control' ).hide().not( this ).show();              
});

$( '#autocontrols .bx-start' ).on( "click", function() {
    console.log( "Starting!" );
    main_slider.startAuto();
});

$( '#autocontrols .bx-stop' ).on( "click", function(){
    console.log( "Stoping!" );
    main_slider.stopAuto();
});