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

javascript changing button id between two states - which way is best

本文关键字：id- 方式最 按钮 两种 状态 之间 javascript      更新时间：2023-09-26

所以我有一个这样的按钮。。。。

<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与之相关。

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

使用jQuery实现起来非常简单，并且添加了:after伪选择器，您甚至可以更改链接的文本：

$(function() {
  $("#menuButton").click(function() {
    $(this).toggleClass("fullcollapse baseexpand");
  });
});
.fullcollapse {
  color: green;
}
.fullcollapse:after {
  content: 'Collapse menu <<';
}
.baseexpand {
  color: red;
}
.baseexpand:after {
  content: 'Expand menu >>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="menuButton" class="btn btn-lg btn-primary fullcollapse" href="#" role="button"></a>

你可以试试这个：

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

JSfiddle：http://jsfiddle.net/samirkumardas/od2murdk/

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

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

相关文章：