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/了解详情。