Почему этот код jQuery работает в Firefox, а не в Chrome или Safari?

Question

Я использую jQuery для выделения (изменяя цвет bg) некоторых ячеек таблицы. Я хочу, чтобы при нажатии кнопки (простой якорь) было присвоено имя класса «selected», и я хочу, чтобы некоторые ячейки таблицы под кнопками выделялись. При повторном нажатии той же кнопки она отменяет выбор и удаляет блики из ячеек таблицы. Когда вы нажимаете другую кнопку, она удаляет другие блики и переключается на новые соответствующие.

Все это отлично работает в Firefox. Когда я пробую это в браузере webkit, это не так. Я не могу понять, почему, и это сводит меня с ума! Код JQuery ниже. Вы можете увидеть страницу по адресу:

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

Я ценю вашу помощь!

Answer 1

Изменить:

id = $(this).attr("id");
name = $("." + id);

на:

var id = $(this).attr("id");
var name = $("." + id);

То есть объявить переменные с var, чтобы они имели локальную область видимости.Без var переменные имели глобальную область видимости и что-то конфликтовали.

Теперь он работает в Chrome / Safari: http://jsbin.com/efilok/

Answer 2

Очевидно, name используется хромом для каких-то других целей.Если бы ваша переменная name не была глобальной переменной, т.е.var name вместо просто name тогда это, вероятно, сработает.Хотя я бы просто использовал другое имя переменной.

Answer 3

Несколько вещей, которые могут решить проблему:

name уже является объектом jQuery. Измените эту строку на:

name.removeClass('highlight');

и

name.addClass('highlight');

Кроме того, вместо return false; я рекомендую event.preventDefault(), например:

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