JQuery-Funktionalität zum Hinzufügen von Klassen funktioniert nicht

Question

Ich versuche, ein Element zu haben, das dem Bereich für Twitter-Tweets ähnelt. Die DIV sollte eine andere Farbe auf Mouseover mit einer neuen Position für das Hintergrundbild sein.

Wenn der Benutzer dann klickt, sollte sich die Position des Hintergrundbildes wieder verschieben und die Hintergrundfarbe sollte sich nur ändern, wenn der Benutzer nicht auf Hover ist. Ich habe dies versucht, aber es wird nicht funktionieren.

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>

Irgendwelche Ideen, was falsch ist. Die neue Klasse scheint nicht auf das Element angewendet zu werden.

Wunderbar

Answer 1

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

bekommt keinen richtigen Selektor. Von Ihrem Markup sollten Sie tun.

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

Sie sollten dann ENTFERNEN onclick="reviews(this); von Ihrem Markup. Wenn Sie Jquery zur Anwendung von Klassen verwenden, sollten Sie diesen Ansatz insgesamt beibehalten. Mischen Sie nicht aufdringlich und unaufdringliches Javascript . Der oben gepostete Code fügt die ractive Klasse nur auf den Link, den Sie angeklickt haben.

Ändern Sie außerdem Ihr css von #reviews .review .ractive zu #reviews .ractive. Die Klasse, die Sie haben, sucht nach einem Element innerhalb review mit der Klasse ractive, Sie brauchen das nicht, da die Klasse auf dem gleichen Element ist

#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; 
}