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

I'm using jQuery to highlight (by changing bg color) some table cells. I want the button (a simple anchor) to be given the class name 'selected' when clicked and I want certain table cells below the buttons to highlight. When you click the same button again, it deselects and removes the highlights from the table cells. When you click a different button, it removes the other highlights and switches to the new appropriate ones.

我正在使用jQuery突出显示(通过更改bg颜色)一些表格单元格。我希望按钮(一个简单的锚点)在单击时被赋予类名“选中”,我希望按钮下方的某些表格单元格突出显示。再次单击同一按钮时,它将取消选择并从表格单元格中删除高光。单击其他按钮时,将删除其他突出显示并切换到新的相应突出显示。

This all works perfectly in Firefox. When I try it in a webkit browser, it does not. I can't figure out why and it's driving me crazy! The jQuery code is below. You can see the page at:

这一切都在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; 
});
});

I appreciate your help!

我感谢您的帮助!

3 个解决方案

#1

A few things that may solve the problem:

可以解决问题的一些事情:

name is already a jQuery object. Change this line to:

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

name.removeClass('highlight');

and

name.addClass('highlight');

Also, instead of return false;, I recommend event.preventDefault(), like this:

另外,我建议使用event.preventDefault(),而不是返回false;

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

#2

Change:

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

to:

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

That is, declare the variables with var so they have local scope. Without var, the variables had global scope and were conflicting with something.

也就是说,使用var声明变量,使它们具有局部范围。没有var,变量具有全局范围并且与某些内容相冲突。

It now works in Chrome/Safari: http://jsbin.com/efilok/

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

#3

Apparently name is being used by chrome for some other purpose. If you were to have your name variable not a global variable, ie. var name instead of just name then it would probably work. Though I would just use a different variable name.

显然,chrome正在使用名称来实现其他目的。如果你的名字变量不是全局变量,即。 var name而不仅仅是name然后它可能会起作用。虽然我只想使用不同的变量名称。

#1