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

{{1}}

Answer 3

显然，name被Chrome用于其他目的。如果你的name变量不是全局变量，即。 var name而不仅仅是name，那么它可能会起作用。虽然我只想使用不同的变量名称。

为什么这个jQuery代码可以在Firefox中运行，但不适用于Chrome或Safari？

3 个答案: