Question

我有一张大桌子（大约500行和7列）。我的代码只需检查我单击的表格单元格（它将单词“reserved”添加到单击的单元格中，此类执行一些简单的边框操作）。

它在Firefox和Opera上运行顺畅，但它在Chrome上很糟糕（我的意思是我必须在单元格的边框变化之前等待一秒钟） - 你能建议我修复它的方法吗？

第一个IF用于其他一些检查，但它只是检查这个特定点击单元格的状态。

$("td").click( function() 
{
    if($(this).attr('system') !=  1)
    {
        if($(this).attr("reserved") != "1" && $(this).attr("reserved") != "2")
        {
            if($(this).attr("_checked")=="1")
            {
                $(this).addClass("reserved"); // here it changes border color
            }

        }
}

Answer 1

您可以尝试缓存选择器：

$("td").click( function() 
{
    var $this = $(this);

    if($this.attr('system') !=  1)
    {
        if($this.attr("reserved") != "1" && $this.attr("reserved") != "2")
        {
            if($this.attr("_checked")=="1")
            {
                $this.addClass("reserved"); // here it changes border color
            }

        }
}

Answer 2

首先，你可以尝试“扁平化”这样的条件：

$("td").click( function() 
{
    if ($(this).attr('system') != 1 &&
        $(this).attr("reserved") != "1" &&
        $(this).attr("reserved") != "2" &&
        $(this).attr("_checked") == "1")
    {
        $(this).addClass("reserved"); // here it changes border color
    }
}

看看它是否有帮助。

Answer 3

我建议使用委托事件，因为当必须监视许多元素时，它们的开销会大很多。

$('#yourTableID').on('click', 'td', function(event) {

  .. 

});

为什么我的jquery td点击事件对Chrome的反应很慢？

3 个答案: