Как изменить значение функции 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() и ш.start() - это функции другого бита js, который запускает таймер (это для приложения таймера):

Не стесняйтесь сообщать мне о своем решении.