javascript - 为什么此 jQuery 代码在 Firefox 中有效，但在 Chrome 或 Safari 中无效？

Question

我正在使用 jQuery 来突出显示(通过更改 bg 颜色)一些表格单元格。我希望按钮(一个简单的 anchor )在单击时被赋予类名称“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/