这个jQuery toggleClass行为看起来很奇怪，我这样做是否正确？

Question

我有一个CSS规则用于隐藏带有class =“hidden”的元素，并且我正在使用jQuery在我点击的任何ID上打开和关闭此类，这样我就可以使元素消失。

为什么这不起作用？

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

但是这样做了？

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

我知道在第一个例子中正确地使用了id，但似乎要切换我必须添加“＃”的类。我还没有看到其他人不得不求助于此的例子，所以我想知道我在这里有多疯狂。

非常感谢

Answer 1

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

你在这里链接活动。 $(this).attr('id')已经为您返回一个字符串。所以你在技术上做"someid".toggleClass("hidden")并没有意义。

在你的第二个例子中，你实际上是通过id再次选择相同的元素并触发你的方法，这是正确的

Answer 2

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

假设您的元素ID为myThing。这是您的代码转换为：

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

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

但实际上，如果您从this获取ID，则没有理由首先提取ID。只需直接使用this。

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

Answer 3

您可以简单地使用：

$(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");