Question

I’m using jQuery to highlight (by changing bg color) some table cells. I want the button (a simple anchor) to be given the class name ‘selected’ when clicked and I want certain table cells below the buttons to highlight. When you click the same button again, it deselects and removes the highlights from the table cells. When you click a different button, it removes the other highlights and switches to the new appropriate ones.

This all works perfectly in Firefox. When I try it in a webkit browser, it does not. I can’t figure out why and it’s driving me crazy! The jQuery code is below. You can see the page at:

http://byegurl.com/scores.html

$(function(){
$(".press").click(function() {
    id = $(this).attr("id");
    name = $("." + id);
    if ($(this).hasClass('selected')) 
         {
            $(this).removeClass('selected');
            $(name).removeClass('highlight');
         } else {
            $('.press').removeClass('selected');
            $("td:not(name)").removeClass('highlight');         
            $(this).addClass('selected');
            $(name).addClass('highlight');
         }
    return false; 
});
});         

I appreciate your help!

Answer 1

A few things that may solve the problem:

name is already a jQuery object. Change this line to:

name.removeClass('highlight');

and

name.addClass('highlight');

Also, instead of return false;, I recommend event.preventDefault(), like this:

$('.press').click(function(event) {
    // ...
    event.preventDefault();
});