如何在单击按钮时更改onclick函数值

Question

我已经尝试寻找这个问题的答案，似乎找不到一个特定的。

我的网站有一个按钮，如下所示：

<input class="btn btn-success" onclick="w.start()" type="button" value="Start" id='start' />

点击后我希望它改为“停止”，我希望onclick函数更改为onclick="w.stop()"而不是w.start() ，我希望类更改为从btn-success到btn-danger （bootstrap）

我可以使用这个jQuery来改变名称：

$(function () {
    $('#start').click(function () {
        $(this).val() == "Start" ? play_int() : play_pause();
    });
});

function play_int() {
    $('#start').val("Stop");
    // do start
}

function play_pause() {
    $('#start').val("Start");
    // do stop
}

但是如何让onclick函数和类更改？

特别是onclick功能:)

Answer 1

关于如何以不同方式处理问题，您有很多好的建议 - 但没有回答您关于如何更改onclick具体问题。 在许多情况下，这是一种有用的能力 - 因此，即使你采取其他人关于一般方法的建议，我也想回答你的具体问题。

这是我测试过并发现有效的代码：

<script>
function play_int() {
    alert("play_int was executed");
    $("#start").val("Stop");
    $("#start").attr("onclick", "play_pause()");
    // do start
}

function play_pause() {
    alert("play_pause was executed");
    $("#start").val("Start");
    $("#start").attr("onclick", "play_int()");
    // do stop
}
</script>

<input class="btn btn-success" onclick="play_int();" type="button" value="Start" id='start' />

Answer 2

我认为最简单的方法是从两个按钮开始，一个叫做start，一个叫stop，最初是隐藏的。

在你的开始功能添加

$('#start').hide();
$('#stop').show();

然后，您的旧按钮及其名称和功能将消失，并显示具有正确名称和正确功能的新按钮。

Answer 3

不要改变它调用的函数，而是使用“if”语句。 不像jquery那样熟悉jsery，js，但我认为它会是这样的。

if($('#start').val = "start"){
   function play_int() {
        $('#start').val("Stop");
        // do start
   }
}
if($('#start').val = "stop"){
   function play_pause() {
        $('#start').val("Start");
        // do stop
   }
}

Answer 4

$(function(){$('#start').click(function() {
   if($(this).val() == "Start"){
       $(this).val("Stop");
       play_int();
   } else {
       $(this).val("Start");
       play_pause();
   }
});

Answer 5

只需使用一个事件处理程序 我会使用jQuery来检测按钮上哪个类是活动的。 然后，您可以执行适当的操作。 如果使用此元素，则无需在元素中设置onclick。

$(function () {
    $('#start').on('click', function() {
        if($(this).is('.btn-success')){
            $(this).removeClass('.btn-success').addClass('.btn-danger').val('Stop');
            //Do Start
        }else{
            $(this).removeClass('.btn-danger').addClass('.btn-success').val('Start');
            //Do Stop
        }
    });
});

Answer 6

为什么不在每次单击按钮时调用切换功能并让它处理条件。

function toggleChange(event){
  if($('#start').val()=="Stop";
     $('#start').val("Start");
     $('#start').addClass('newClass')
     $('#start').removeClass('oldClass')
   }
   else{
      $('#start').val("Stop");
      $('#start').addClass('newClass')
      $('#start').removeClass('oldClass')
   }
}

Answer 7

<input class="btn btn-success" onclick="w.start()" type="button" value="Start" id='btn' />

 $(function () {
  $('#btn').click(function () {
    var opn=$(this).val();
    switch(opn){
      case 'start':
      $(this).val("stop").removeClass('.btn-success').addClass('.btn-danger').click(w.stop); 
      break;

      case 'stop':
      $(this).val("start").removeClass('.btn-danger').addClass('.btn-success').click(w.start); 
      break;

  }
});
});

Answer 8

这是一个没有jquery的解决方案

HTML

<input class="btn-success" onclick="callme(this);" type="button" value="Start"/>

JAVASCRIPT

var callme = (function() {
    var start = true;
    return function(me) {
        if(start) {
            me.value = "Stop";
            me.className = "btn-danger";
            w.start();
        } else {
            me.value = "Start";
            me.className = "btn-success";;
            w.stop();
        }
        start = !start;
    };
}());

这是小提琴http://jsfiddle.net/HhuNU/

Answer 9

我看了一下你的回答，找到了一个最适合我的解决方案：

$(function(){$('#start').click(function() {
    $(this).val() == "Start" ? play_int() : play_pause();                           
    });
});

function play_int() {
    $('#start').val("Stop");
    $('#start').addClass('btn-danger');
    $('#start').removeClass('btn-success');
    w.start();
}

function play_pause() {
    $('#start').val("Start");
    $('#start').addClass('btn-success');
    $('#start').removeClass('btn-danger');
    w.stop();
}

w.stop（）和w.start（）是启动计时器的另一个js的函数（这是一个计时器应用程序）:)

随意给我反馈我的解决方案。