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

也许toggle类更好，但是一个函数（$ play_function（）和$ pause_function（））里面，我需要设置默认播放或暂停，所以设置一个if ... hasClass来检测第一个点击，可以有如果($this.hasClass('play')) or if ($this.hasClass('pause'))切换类和函数的简单方法？或其他方法做这个功能？

上面的代码工作但有点复杂，我想知道任何其他简单的方法：）

非常感谢

Answer 1

在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 2

就像你说的那样，我会尝试使用toggleClass函数：

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

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 on click函数切换类和函数

3 个答案: