如何更改單擊按鈕時的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（引導）

我可以獲取名稱使用來改變精這個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').hide(); 
$('#stop').show(); 

然後你的舊按鈕，它的名字和功能消失，用正確的名稱新按鈕和適當的功能出現。

Answer 3

而不是改變它調用的函數，使用「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 
    } 
} 

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函數（這是一個定時器應用程序）:)

隨時給我反饋我的解決方案。