如何使用jquery为'this'类更改css样式？

Question

I have a list of images that each are tied to a class.

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

on mouseover of the images, I want a block of text in a different area, but shares a class, to display. I call

hoverList.mouseover(this.hoverable.displayTheDeets)

and it runs

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")
}

From the console, if I run the literal command

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

it returns the element I want. And I can change the display with no problem.

I think my problem is with thisClass. Any thoughts would be appreciated.

Answer 1

Try,

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

or simply

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

Please note that .attr('class') would return the class being used for the particular element, and it wont return the class name in the format of selector.

Additional Note : And in sometimes if you have more than one class set with that particular element then it would make the selector as invalid like $('.class1 class2 class3')

Answer 2

Try with prefix dot. the attr("class") returns only the name not the prefix dot.

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

or

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

Answer 3

尝试

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

Answer 4

Part of the problem has already been answered well enough; however, I would suggest that you solve this problem in another way.

You can define the class name separately from the class of your hovering element, eg

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

Then:

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

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