如何使用jQuery更改“this”类的CSS样式？

Question

我有一个图像列表，每个图像都与一个类相关联。

var hoverList = this.hoverable.getAllList() //this gets the list.

当鼠标悬停在图像上时，我希望在不同的区域显示一个文本块，但该文本块与原区域共享一个类。我调用...

hoverList.mouseover(this.hoverable.displayTheDeets)

并且它运行

displayTheDeets: function(){
    big=$(".project-details")
    thisClass=$(this).attr("class")
    console.log(thisClass)
    //$(big).find(thisClass).css("display","")
    $(big).find(thisClass).css("display", "block")
    //$(big > thisClass).css("display","block")
}

如果我从控制台运行字面命令

$(".project-details").find(".code-fusion")

它返回了我想要的元素。并且我可以轻松更改显示方式。

我认为我的问题在于这个类（thisClass）。欢迎提出任何想法。

- notthehoff

---

你应该在 big 和 thisClass 前面加上 var，因为你隐式地创建了全局变量。 - christian314159

当您的元素包含多个CSS类（例如class="foo bar"）时，此方法将无法正常工作。 - Ja͢ck

Answer 1

请尝试，

big.find('.' + thisClass).css("display", "block");

或者简单地说

big.find('.' + thisClass).show();

请注意，.attr('class')将返回用于特定元素的类，并且不会以选择器格式返回类名。 额外说明：如果您在特定元素中设置了多个类，则有时会使选择器无效，例如$('.class1 class2 class3')。

- Rajaprabhu Aravindasamy

Answer 2

尝试使用前缀点。attr("class")返回的是类名而不是前缀点。

$(big).find("."+ thisClass).css("display", "block")

或者

 $(big).find("."+ thisClass).show();

- Sudharsan S

---

Sudharsan，我们不需要再将jQuery对象包装到$()中，这样做不会带来任何好处。 - Rajaprabhu Aravindasamy

Answer 3

尝试

$(big).find("."+ thisClass).css("display", "block")

- Sridhar R

Answer 4

这个问题的一部分已经得到了很好的回答；然而，我建议您用另一种方式解决这个问题。

您可以将类名单独定义于您的悬停元素的类之外，例如：

<... class="something" data-linked="theclass">

然后：

displayTheDeets: function(){
    var className = $(this).data('linked');

    $(".project-details").find('.' + className).show();
}

- Ja͢ck