jquery 点击功能切换 class 和功能

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

也许切换 class 更好，但是里面有一个函数（ $play_function() 和 $pause_function() ），我需要设置默认播放或暂停，所以设置一个if...hasClass 来检测第一次点击，可以有一种简单的方法来切换 class 并通过 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>

在脚本中：

    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>

jquery 点击功能切换 class 和功能

jquery on click function toggle class and function

jquery

click

toggle