jquery切换按钮值

时间:2011-04-18 11:06:43

标签: jquery

在下面的代码中单击播放按钮时其值应更改为暂停,单击暂停时应调用其他函数。如何使用jquery切换

  <input type="button" onclick ="play" value="play"/>
   <script>
     function play()
     {
               play_int();
           //   Button value to be changed to pause
     }   

  And when pause play_pause();

5 个答案:

答案 0 :(得分:18)

为您的按钮添加ID:

<input type="button" id="play" value="play"/>

然后你可以这样做:

$('#play').click(function() {
   if ($(this).val() == "play") {
      $(this).val("pause");
      play_int();
   }
   else {
      $(this).val("play");
     play_pause();
   }
});

或者像这样的稍微整洁的版本:

$(function(){
    $('#play').click(function() {
       // if the play button value is 'play', call the play function
       // otherwise call the pause function
       $(this).val() == "play" ? play_int() : play_pause();
    });
});

function play_int() {
    $('#play').val("pause");
    // do play
}

function play_pause() {
    $('#play').val("play");
    // do pause
}

Working demo

答案 1 :(得分:13)

尝试(在jQuery&lt; 1.9 中)

$("input[type='button']").toggle(
    function(){
        $(this).val("Pause");
    }, 
    function(){
        $(this).val("Play");
    }
);

DEMO

注意:toggle事件在1.8中已弃用,在1.9中已删除

答案 2 :(得分:2)

$('#play_button_id').toggle(play,play_pause);

这将在您第一次单击按钮时触发play()函数

和第二次单击按钮时的play_pause()

答案 3 :(得分:2)

我会说

statuses = ['Play', 'Pause'];
$('#btn_play').val(
    $('#btn_play').val() == statuses[0]
    ? statuses[1] : statuses[0]
);

答案 4 :(得分:1)

最简单的想法可能是这个

function play(action) {
 { 
   if(action=='play') { 
      play_int(); 
      $("#btn_play").val('pause');
   }
   else { 
      pause_int(); 
      $("#btn_play").val('play');
   }
}

$("#btn_play").click(function() {
   val = $(this).val();
   play(val);
}