javascript在两种状态之间更改按钮id-哪种方式最好

所以我有一个这样的按钮

<a id="fullcollapse" class="btn btn-lg btn-primary" href="#" role="button">Collapse menu &laquo;</a>

基本上，我想将上述onclick的id更改为“baseexpand”，并在下一次onclick恰好恢复为原始id=“fullcollapse”时更改

我理解这对大多数人来说可能很容易，并且已经看过了从Jquery到if-else语句的所有文档和示例。。。我对其他人如何处理这一问题感兴趣。Jquery更可取，因为id与之相关

$(function() {

  $( '#fullcollapse, #baseexpand' ).click(function() {
    if ( $( this ).attr('id') === 'fullcollapse' ) {
      $( this ).attr('id', 'baseexpand');
    } else {
      $( this ).attr('id', 'fullcollapse');
    }
  });

});

---

此代码未经测试，因此无法保证它能正常工作。

您可以尝试以下方法：

$('a#fullcollapse').click(function(){
     $(this).attr('id',$(this).attr('id')=='fullcollapse'?'baseexpand':'fullcollapse');
});

---

jsiddle:

正如我前面所说的，您应该保持ID不变，并在单击时切换类。更改id可能会在代码的其他地方造成混乱

使用jQuery实现起来非常简单，并且在伪选择器之后添加了

：甚至可以更改链接的文本：


$（函数（）{
$（“#菜单按钮”）。单击（函数（）{
$（this.toggleClass（“fullcollapse baseexpand”）；
});
});
.fullcollapse{
颜色：绿色；
}
.完全崩溃：之后{
内容：“折叠菜单”；
}

可能重复：如果你真的“看过从Jquery到if-else语句的所有文档和示例…”，那么对你来说也很容易。我不是问这个问题，因为我做不到（如上所述），我只是对其他人认为“最好”的方式感兴趣。。。。主要是因为有很多不同的方法可以达到预期的效果，正如我从你的链接sharkbyte中看到的那样，这个例子只改变了id一次。。。我想，对不起caps@havingagoatit不太可能，只有一种方法可以实现它。检查并更改id，就这么简单。尽管如此，我还是不建议你改变身份证。最好将id设置为静态，并添加一个类，单击该类即可切换。当您将id更改为baseexpand时，它将不再工作，因为您只针对旧id，请参阅我的长篇大论回答。除此之外，您有一个很好的主意，而且它比我的示例干净得多，但我的示例更“人类可读”，然而，对于初学者来说，这是可以理解的+1@Dendromaniac它应该会起作用。检查可能我错了，只是我认为它将它附加到ID，而不是元素的实体。对不起，我的愚蠢。没问题，谢谢。无论如何，我会研究它，以及使用类而不是id。希望这是两种方法的合并。我建议使用类，如果你愿意，我可以编辑答案并添加使用类的方法？