Question

所以我有一个像这样的按钮......

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

Answer 1

正如我之前所说，您应该保留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>

Answer 2

你可以试试这个：

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

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

Answer 3

$(function() {

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

});

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

javascript更改两个州之间的按钮ID - 哪种方式最好

3 个答案: