jQuery If Div Does NOT Exist

Question

I have 3 images and have a function so that on mouse rollover they fade in and out. I don't want to do this if the image being rolled over has the class 'selected'.

So far I have this code:

$(".thumbs").hover(function(){

if (!($(this).hasClass(".selected")){

$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);

}

});

to me the IF statement looks like it should be:

if (!($(this).hasClass(".selected"))){

but neither work so who knows. When I implement this code my entire javascript stops working, any ideas why?

There is virtually NO information on IF statements for jQuery on Google, it's ridiculous. I would greatly appreciate any help!

Answer 1

The problem is that your element has the class "selected" not ".selected". Remove the dot.

Answer 2

Maybe it should be

if (!($(this).hasClass("selected"))){

no . because it knows you're looking for a classname.

Answer 3

The jQuery docs on selectors tells you everything you neeed to know.

$('.thumbs:not(.selected)').hover(function(){
  // ...
})

Answer 4

Use the not function:

if ($(this).not(".selected")) {
    ...
}

Answer 5

I think your javascript isn't properly formatted -- braces in the wrong places -- and you shouldn't use the dot in the hasClass function. A little better formatting would help readability, too.

$(document).ready( function() {
    $('.thumbs').hover( function() {
                            if (!$(this).hasClass('selected')) {
                                $(this).stop().fadeTo("normal", 1.0);
                            }
                        },
                        function() {
                            $(this).stop().fadeTo("slow", 0.3);
                        }
                 );
});