Как заменить кнопки на мыши с помощью JQuery

Question

У меня есть кнопка в настоящее время доступна с идентификатором:

<input type="button" id="show_button" value="Show" /> 

То, что я хочу, это that..onclicking кнопки, значение кнопки будет изменено на " Hide ", и его идентификатор будет изменен на" hide_button ".. И при нажатии кнопки hide это значение будет изменено на" Показать ", и его идентификатор изменится на" show_button ".. Как я могу это достичь?

Answer 1

я не знаю, почему вы хотите изменить идентификатор, так как мы можем получить то, что вы хотите без изменения идентификаторы .. попробовать это

$('#show_button').click(function(){ 
    var $this=$(this); 
    $this.val(($this.val()=="Show")?"Hide":"Show"); 
}); 

это лучше, так как вы не должны использовать служ о щелкните обработчик событий для обоих ид ..

и если упаковывают вам нужно изменить идентификаторы .. затем использовать по делегированию события ..

$(document).on('click','#show_button',function(){ 
    var $this=$(this); 
    $this.prop('id','hide_button'); 
    $this.val("Hide"); //OR $this.val("Hide") //if you are using input type="button" 
}); 

$(document).on('click','#hide_button',function(){ 
    var $this=$(this); 
     $this.prop('id','show_button'); 
    $this.val("Show"); //OR $this.val("Hide") //if you are using input type="button" 
}); 

fiddle here

Answer 2

Вы можете изменить значение с помощью

$('#show_button').val('hide'); 

Вы можете изменить идентификатор с помощью

$('#show_button').attr('id','hide_button'); 

Answer 3

Использование библиотеки Jquery Javascript:

$('body').on('click', '#show_button', function() { 
    $(this).attr('id', 'hide_button').val('Hide'); 
}); 

$('body').on('click', '#hide_button', function() { 
    $(this).attr('id', 'show_button').val('Show'); 
}); 

Answer 4

$('body').on('click', '#show_button, #hide_button', function() { 
    var $this = $(this), 
     isShow = $this.attr('id') == 'show_button'; 

    if (isShow) { 
     $this.attr('id', 'hide_button').val('Hide'); 
    } 
    else { 
     $this.attr('id', 'show_button').val('Show'); 
    } 
}); 

jsFiddle: http://jsfiddle.net/sW49u/

Answer 5

В одном решении для вашего вопроса есть 2 входа, которые вы переключаете между ними. Мне не нравится изменение/переименование принципа id.

Проверьте это demo.

HTML

<input type="button" id="show_button" value="Show" /> 
<input type="button" id="hide_button" value="Hide" style="display:none;" /> 

JQuery

$('input').click(
    function(){ 
     $('input').toggle(); 
}); 

Answer 6

Рабочий пример: http://jsfiddle.net/TjaBR/

$('body').on('click', '#process', function() { 
    $(this).toggleClass('hidden'); 
    $(this).val($(this).hasClass('hidden') ? 'Hide' : 'Show'); 
});