javascript - 在两个功能之间切换

Question

目前我有一个按钮，当点击它时，它的文本从暂停更改为恢复。我使用 jQuery 并为此切换：

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

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

function pauseTimer() 
function startTimer()

如何将这两个功能“集成”到我的切换代码中？因此，当我点击 Pause 时，它​​会将文本切换为 Resume 并使用该功能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
  }
}

这使用jQueryAPI 检查音频标签的当前状态，然后同时将其状态切换为playorpause和 。它将跨浏览器工作。

Answer 6

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

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

Answer 7

你可以使用 jQuery is visible 方法：

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