-3

我有一个当前可用的 id 按钮：

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

我想要的是..单击按钮时，按钮的值将更改为“隐藏”，它的 id 将更改为“hide_button”。单击隐藏按钮时，它的值将更改为“显示”它的 id 将更改为“show_button”..我怎样才能做到这一点？

4

6 回答 6

5

我不知道您为什么要更改 ID，因为我们可以在不更改 ID 的情况下获得您想要的内容.. 试试这个

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

这更好，因为您不必对两个 id 都使用两个单击事件处理程序..

如果您需要更改 ids .. 然后使用事件委托 ..

 $(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"
 });

在这里摆弄

于 2013-07-29T12:28:18.130 回答
1

工作示例：http: //jsfiddle.net/TjaBR/

$('body').on('click', '#process', function() {
   $(this).toggleClass('hidden');
   $(this).val($(this).hasClass('hidden') ? 'Hide' : 'Show');
});
于 2013-07-29T12:31:30.800 回答
1

您可以使用更改值

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

您可以使用更改 id

 $('#show_button').attr('id','hide_button');
于 2013-07-29T12:28:13.293 回答
1

使用 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');
});
于 2013-07-29T12:28:43.633 回答
1 
$('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/

于 2013-07-29T12:29:47.290 回答
1

您的问题的一种解决方案是有 2 个输入，您可以在它们之间切换。我不喜欢更改/重命名 id 的原则。

检查这个演示。

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();
});
于 2013-07-29T12:29:49.037 回答