为什么这个jQuery代码在Firefox中工作，而不是Chrome或Safari ?

Why does this jQuery code work in Firefox but not Chrome or Safari?

本文关键字：Chrome Safari 工作 jQuery 代码 Firefox 为什么      更新时间：2023-09-26

我使用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; 
});
});
我很感激你的帮助!

变化:

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

: 

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

也就是说，用var声明变量，使它们具有局部作用域。如果没有var，变量具有全局作用域，并且与某些内容相冲突。

它现在可以在Chrome/Safari: http://jsbin.com/efilok/

可以解决这个问题的一些方法:

name已经是一个jQuery对象。将这一行改为:

name.removeClass('highlight');

和

name.addClass('highlight');

另外，我推荐event.preventDefault()而不是return false;，如下所示:

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

显然name被chrome用于其他目的。如果你有你的name变量不是一个全局变量，即。var name而不是name，那么它可能会工作。不过我要用一个不同的变量名

相关文章：