JQuery add class functionality not working

Question

I am trying to have an element rather like the Twitter tweets area. The DIV should be a different colour on mouseover with a new position for the background image.

Then when the user clicks the background image position should move again and the background colour should change only when the user is not on hover. I tried this but it will not work.

JS --

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS --

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

Any ideas what is wrong. The new class does not seam to be applied to the element.

Marvellous

we need just a bit more code to troubleshoot, basically the portion that calls reviews() — Loktar
– Loktar, Commented Jun 9, 2011 at 17:48

Jeremy B. · Accepted Answer · 2011-06-09 17:54:16Z

3

$(id).addClass('ractive');

is not getting a proper selector. From your markup you should be doing.

$('.review').click(function() {
    $(this).addClass('ractive');
});

You should then REMOVE onclick="reviews(this); from your markup. If you are using jquery to apply classes, stick with that approach overall. Don't mix obtrusive and unobtrusive javascript. The code posted above will add the ractive class to only the link you have clicked.

Also, change your css from #reviews .review .ractive to just #reviews .ractive. The class you have is looking for an element inside review with the class ractive, you don't need that as the class is on the same element

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

edited Jun 9, 2011 at 17:54

answered Jun 9, 2011 at 17:49

Jeremy B.

9,2323 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user113716 Over a year ago

OP's issue was purely CSS. Nothing wrong with passing the element to the reviews(id) method via this. Makes $(id).addClass('ractive'); effectively the same as $(this).addClass('ractive');

Jeremy B. Over a year ago

Except the OP did not declare an ID to the div, so there was nothing to pass. jsfiddle.net/5NL9X You can see nothing happens when using the OP's code.

Collectives™ on Stack Overflow

JQuery add class functionality not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related