JQuery на функции нажмите тумблер класса и функции

Question

здесь пьесы и паузы функции кнопки

$('#control').on('click', function() { 
    var $this = $(this); 
    if ($this.hasClass('play')) { // on first click, detect by if hasClass 
     $this.removeClass('play').addClass('pause'); // maybe toggle class better 
     $play_function(); // but here a function... 
    } else { 
     $this.removeClass('pause').addClass('play'); // maybe toggle class better 
     $pause_function(); // but here a function too... 
    } 
    }); 

возможно переключение класса лучше, а функция ($ play_function() и $ pause_function()) внутри, мне нужно установить по умолчанию воспроизведение или пауза, поэтому установите if, если ... hasClass для обнаружения первого щелчка, может иметь простой способ переключения класса и функции с помощью if ($this.hasClass('play')) or if ($this.hasClass('pause'))? или другой метод выполняет эту функцию?

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

Большое спасибо

Answer 1

Как вы сказали, я хотел бы попробовать функцию toggleClass:

$('#control').on('click', function() { 
    var $this = $(this); 
    $this.toggleClass("pause",function(){ 
     ($this.hasClass('pause')) ? pauseFunction():playFunction(); 
    }); 
}); 

Answer 2

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

<button id="control" data-is-playing=0 ></button> 

В SCRI pt:

var callFuncs = new Array(); 
    callFuncs[0] = function playFunction() {};// call play when paused 
    callFuncs[1] = function pauseFunction() {}; 
    $('#control').on('click', function() { 
     var $this = $(this); 
     var stat = 1 - $this.attr("data-is-playing"); // maybe you can use = ! $this.attr("data-is-playing"), I'm not sure 
     $this.toggleClass('play'); // initially, there is no 'play' 
     $this.attr("data-is-playing", stat); 
     callFuncs[stat](); 
    }); 

, но решение CodeGodie кажется намного лучше с небольшой ошибкой!

$('#control').on('click', function() { 
    var $this = $(this); 
    $this.toggleClass("pause",function(){ 
    ($this.hasClass('pause')) ? pauseFunction():playFunction(); 
    }());// pay attention here 
}); 

Получайте удовольствие!

Answer 3

Попробуйте

var controls = { 
 
    "play": function play(elem) { 
 
     $(elem).css("color", "red") 
 
    }, 
 

 
    "pause": function play(elem) { 
 
     $(elem).css("color", "green") 
 
    } 
 
}; 
 

 
$("#control").on("click", controls, function(e) { 
 
    return $(this).attr("class", function(i, c) { 
 
    return c === "play" ? "pause" : "play" 
 
    }) && controls[this.className](this) 
 
});

#control { 
 
    font-size:36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="control">click</div>