Jquery：通過單擊元素本身來更改元素的ID，然後通過再次單擊元素來更改元素的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

我寧願使用類，而不是ID的改變樣式表屬性。

$(#chatframebutton).toggleClass(chatframebuttonshownhidden); 

其中chatframebuttonshownhidden在樣式表

結賬http://api.jquery.com/toggleClass/更多細節說明。