Jquery：通过单击元素本身来更改元素的ID，然后通过再次单击元素将其更改回来

Question

我正试图通过使用Jquery单击元素来更改元素的ID。该操作在第一次单击时起作用，但在之后的任何单击都不会起作用。

$(document).ready(function(){
$("#chatframebuttonhidden").click(function() {
var $t = $(this);
            $t.attr({
                    id : $t.attr('id2')
                });
            });;
$("#chatframebuttonshown").click(function() {
var $t = $(this);
            $t.attr({
                    id : $t.attr('id1')
                });
            });;
});

<div id="chatframebuttonhidden" id2="chatframebuttonshown" id1="chatframebuttonhidden"></div>

术语"隐藏"并不意味着div在视野之外，它只是意味着它要小得多，不那么引人注目。

最终目标是在屏幕底部制作一个隐藏/取消隐藏大型固定位置分隔符的按钮。我认为更改ID以引用新样式表是最好的方法，但如果你们知道更好的方法，我会洗耳恭听的。

Answer 1

使用一个类来打开和关闭它。ID并不是真的要这样更改的，类是。

也不需要交换整个样式表来隐藏一些元素。使用父容器并隐藏它。

Answer 2

使用jQuery toggle:

$("#chatframebutton").click(function() {
 $('#chatframe').toggle();
});

不需要为这个用例处理类或id。

http://api.jquery.com/toggle/

Answer 3

我宁愿使用class而不是id来更改样式表属性。

$(#chatframebutton).toggleClass(chatframebuttonshownhidden);

其中chatframebuttonshownhidden在样式表中进行了描述

结账http://api.jquery.com/toggleClass/了解更多详细信息。