為什么這個jQuery代碼可以在Firefox中運行，但不適用於Chrome或Safari？

Question

我正在使用jQuery突出顯示（通過更改bg顏色）一些表格單元格。 我希望按鈕（一個簡單的錨點）在單擊時被賦予類名“選中”，我希望按鈕下方的某些表格單元格突出顯示。 再次單擊同一按鈕時，它將取消選擇並從表格單元格中刪除高光。 單擊其他按鈕時，將刪除其他突出顯示並切換到新的相應突出顯示。

這一切都在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已經是一個jQuery對象。 將此行更改為：

name.removeClass('highlight');

和

name.addClass('highlight');

而且，而不是return false; ，我推薦event.preventDefault() ，如下所示：

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

Answer 3

顯然，chrome正在使用name來實現其他目的。 如果你的name變量不是全局變量，即。 var name而不僅僅是name然后它可能會工作。 雖然我只想使用不同的變量名稱。