Question

目前我有一个按钮，可以在单击时将其文本从暂停更改为恢复。我使用jQuery并为此进行切换：

$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    });
});

这一切都有效。我还有两个功能：

function pauseTimer() 
function startTimer()

如何将这两个功能“集成”到我的切换代码中？因此，当我点击Pause时，它会将文本切换为Resume AND并使用函数pauseTimer()，如果我再次点击按钮，文本将变回Pause并使用StartTimer()？

由于

Answer 1

$(this).html() == "Pause" ? pauseTimer() : startTimer();

会工作吗？你必须在函数中将元素的html内容更改为Start或Pause，以便函数根据元素的html交替运行。

Answer 2

除非我完全误解了你的问题，否则应该这样做：

$("#pause").click(function() {
  $("td").toggle();
  if($(this).html() == "Pause")
  {
      $(this).html("Resume");
      pauseTimer();
  }else{
      $(this).html("Pause");
      startTimer();
  }
});

Answer 3

这样的东西？

var doStuff = function(callback, text){
    callback();
    return text;
}
$(this).html($(this).html() == "Pause" ? doStuff(startTimer, "Resume") : doStuff(StartTimer, "Pause"));

Answer 4

var globalTimerPaused = false;
$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
      if(!globalTimerPaused){ pauseTimer() } else { startTimer() };
      globalTimerPaused = !globalTimerPaused;
    });
});

Answer 5

试试这个

$('selector').click(function () { // on click event
  var song = $('theaudiotag');
  if(song.paused) { // if song is paused
     $(this).play(); // play it
     $(this).html('Pause'); // change text
  } else { // otherwise
     $(this).pause(); // pause it
     $(this).html('Play'); // change text
  }
}

这会使用jQuery API来检查音频标记的当前状态，然后将其状态切换为play或pause并同时进行。它将跨浏览器工作。

Answer 6

您可以在此处使用window方法，例如：

$("#pause").click(function () {
    $("td").toggle();
    $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    window[$(this).html() === "Resume" ? "pauseTimer" : "startTimer"]();
});

Answer 7

您可以使用jQuery是可见的方法：

if ($('td').is(":visible"))
{
pauseTimer();
}
else
{
startTimer()
}

丹

Answer 8

另一个选择是执行以下操作。

//jQuery 1.8 toggle replacement
$.fn.toggleClick = function(){
    var methods = arguments,
        count = methods.length;
    return this.each(function(i, item){
        var index = 0;
        $(item).click(function(){
            return methods[index++ % count].apply(this,arguments);
        });
    });
};

function startTime() {
    $("td").toggle();
    $(this).val("Start");
}

function pauseTime() {
    $("td").toggle();
    $(this).val("Pause");
}

$("#clickme").toggleClick(startTime,pauseTime);

JSFiddle

Answer 9

$(document).ready(function() {
$("#pause").click(function(pauseTimer(),StartTimer()) {
  $("td").toggle();
  $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
});
});

在两个函数之间切换

9 个答案: