0

我已经尝试为此寻找答案，但似乎找不到特定于此的答案。

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

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

在单击时我希望它更改为“停止”并且我希望 onclick 函数更改为onclick="w.stop()"而不是w.start()并且我希望该类更改为 from btn-successto 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 功能:)

4

9 回答 9

3

你得到了很多关于如何以不同方式处理问题的好建议——但没有回答你关于如何改变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' />
于 2013-08-02T15:05:43.430 回答
0

这是一个没有 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/

于 2013-08-02T15:02:10.430 回答
0

我查看了您的回复，并找到了最适合我的解决方案：

$(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 函数（这是用于计时器应用程序）:)

随时就我的解决方案给我反馈。

于 2013-08-02T15:02:17.513 回答
0

不要更改它正在调用的函数，而是使用“if”语句。不像我生的那样熟悉jquery，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
   }
}
于 2013-08-02T14:43:05.463 回答
0 
$(function(){$('#start').click(function() {
   if($(this).val() == "Start"){
       $(this).val("Stop");
       play_int();
   } else {
       $(this).val("Start");
       play_pause();
   }
});
于 2013-08-02T14:44:56.363 回答
0

只需使用一个事件处理程序。我会使用 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
        }
    });
});
于 2013-08-02T14:45:02.790 回答
0

我认为最简单的方法是从两个按钮开始，一个称为开始，一个称为停止，并且最初隐藏停止。

在您的启动功能中添加

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

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

于 2013-08-02T14:42:28.400 回答
0

为什么不每次单击按钮时调用一个切换函数并让它处理条件。

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')
   }
}
于 2013-08-02T14:47:13.240 回答
0 
<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;

  }
});
});
于 2013-08-02T14:52:34.357 回答