這jQuery toggleClass行爲似乎很奇怪，我正確地做這件事嗎？

Question

我有一個隱藏元素與類=「隱藏」的CSS規則，我使用jQuery來切換這個類的開關，無論我點擊什麼ID，所以我可以使元素消失。

爲什麼這不起作用？

$(this).attr('id').toggleClass("hidden"); 

但這是嗎？

var x = "#" + $(this).attr('id'); 
$(x).toggleClass("hidden"); 

我知道id在第一個例子中正確使用，但似乎要切換類，我必須添加一個「＃」。我還沒有看到任何其他人不得不訴諸的例子，所以我想知道我在這裏有什麼瘋狂。

非常感謝

Answer 1

您可以簡單地使用：

$(this).toggleClass("hidden"); 

$(this)是實際的元素你」重新使用，所以你可以使用它來直接切換類。

在你的例子中，$(this).attr('id')是一個字符串，而不是一個元素。

此代碼的工作，因爲你正在做的ID（字符串），並在網頁上選擇ID：

//Store the id into a string 
var x = "#" + $(this).attr('id'); 
//Pass the ID back into jQuery, and find the element 
$(x).toggleClass("hidden"); 

Answer 2

$(this).attr('id').toggleClass("hidden"); 

您在這裏鏈接事件。 $(this).attr('id')已經返回給你一個字符串。所以你在技術上做"someid".toggleClass("hidden")這是沒有道理的。

在你的第二個例子，你實際上是再次通過ID選擇相同的元素和發射你的方法，這是對

Answer 3

.attr('id')返回一個字符串，而不是元素。

讓我們假裝您的元素的ID爲myThing。這裏是你的代碼轉換爲：

// 1 
"myThing".toggleClass("hidden"); 

// 2 
var x = "#myThing"; 
$("#myThing").toggleClass('hidden'); 

不過說真的，如果你從this獲取ID，沒有理由來提取ID擺在首位。直接使用this即可。

$(this).toggleClass('hidden');