How to change css style for class 'this' using jquery?

Question

I have a list of images, each of which is attached to a class.

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

when hovering over images, I want a block of text in another area, but it splits the class to display. I'm calling

hoverList.mouseover(this.hoverable.displayTheDeets)

and he launches

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 a literal command

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

it returns the item i want. And I can change the display without any problems.

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

Answer 1

Try

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

or simply

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

Note that it .attr('class')will return the class used for a particular element, and it will not return the class name in selector format.

. , , , $('.class1 class2 class3')

Answer 2

. attr ( "class" ) , .

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

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

Answer 3

Try

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

Answer 4

Part of the problem has already been solved quite well; however, I would suggest you solve this problem differently.

You can define the class name separately from the class of your hanging element, for example.

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

Then:

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

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