Javascript 单击按钮更改按钮上的ID值，使用Jquery单击新ID更改回原始ID

我试着用一个按钮作为开关。如果我单击按钮，

值

和

id

会发生变化。如果我再次单击该按钮，它将返回原始的

值

和

id

原始值可以如下所示：

value="Show all" id="showall"

更改为此值

value="Standard" id="default"

$（函数（）{
$（“#showall”）。单击（函数（）{
$（“#showall”）//将按钮上的值文本更改为标准
$（“#showall”）//将按钮上的ID值更改为默认值
});
$（“#默认值”）。单击（函数（）{
$（“#default”）//将值更改回原始值，即“全部显示”
$（“#default”）//将ID更改回原来的“Showall”
});

假设此按钮位于某种类型的

中，我们可以在其中处理其事件（您也可以从正文或文档中处理它，但不建议这样做）：

---

演示：

为什么要更改按钮的ID？ 你可以这样做：

  $(function () {
       $("#switchButton").click(function(){
           if($(this).value == "default"){
                $(this).value = "Show all";
                // do other stuff
           }else if($(this).value == "Show all"){
                $(this).value = "default";
                // do other stuff
           }
       });
    });

---

我知道这并不是你想问的问题，但如果我们在你的问题中后退一步，我想你真正想要的是在两个按钮之间切换，因此我认为这非常容易维护、理解、直观，而且还有很多事情，只需使用两个格式良好的按钮并交替显示/隐藏即可：

<style>
  button#default{
    display: none;
  }
</style>
 ​
<button id="showall" value="Show all">Show all</button>
<button id="default" value="Standard">Standard</button>

<script>
  function toggleButtons(){
    $("button#showall, button#default").toggle();
  }

  $("button#showall, button#default").click( toggleButtons );
</script>

按钮#默认值{
显示：无；
}
​
全部展示
标准
函数切换按钮（）{
$（“按钮显示全部，按钮默认值”）.toggle（）；
}
$（“按钮#显示全部，按钮#默认值”）。单击（切换按钮）；

---

您应该使用类切换，而不是更改ID

---

不要忘记submit；）+1的初始值。您应该切换类，而不是更改id。

  $(function () {
       $("#switchButton").click(function(){
           if($(this).value == "default"){
                $(this).value = "Show all";
                // do other stuff
           }else if($(this).value == "Show all"){
                $(this).value = "default";
                // do other stuff
           }
       });
    });

$("#showall").on('click', function() {
    this.id = this.id=='showall' ? 'default' : 'showall';
    this.value = this.value=='Standard' ? 'Show All' : 'Standard';
});

<style>
  button#default{
    display: none;
  }
</style>
 ​
<button id="showall" value="Show all">Show all</button>
<button id="default" value="Standard">Standard</button>

<script>
  function toggleButtons(){
    $("button#showall, button#default").toggle();
  }

  $("button#showall, button#default").click( toggleButtons );
</script>

if (that.hasClass('foo')) {
    that.removeClass('foo').addClass('bar').val('bar');
} else {
    that.removeClass('bar').addClass('foo').val('foo');
}