jquery滞后点击功能

Question

我有一张表与不同的列标识与不同的类。

我也有一个复选框绑定到每一列。

我创建了一个函数，在点击任何复选框时调用。在这个函数中，我隐藏/显示与此链接的列。

它没有任何JavaScript错误，代码如下：

$(document).ready(function(){ 
     $('ul input').click(function(){ 
      //alert('yooo'); 
      if ($(this).is(':checked')) { 
       //alert('checked'); 
       $("td."+replaceAll(" ","_",$(this).val())).show(); 
       $("th."+replaceAll(" ","_",$(this).val())).show(); 
       //alert($("td").length); 
      } 
      else{ 
       //alert('unselected'); 
       $("td."+replaceAll(" ","_",$(this).val())).hide(); 
       $("th."+replaceAll(" ","_",$(this).val())).hide(); 
      } 
     }); 
    }); 

然而，每一次点击后，该操作有一个滞后（许多点击之后就变成tooooooo缓慢，许多秒） 。

我也试着用.css代替隐藏显示，但它没有做任何改变。

Answer 1

而是在每一个运行的jQuery选择的点击如下图所示：

$("td."+replaceAll(" ","_",$(this).val())) 

你可以建立某种类似的缓存：

var cache = {} //<-- declare this outside your click handler 

    //add the code below inside your click handler 
    className = replaceAll(" ","_",$(this).val()) 
    if(!cache[className]) 
     cache[className ] = $("td."+className + ", th."+className); //select all the elements once and store in the cache object 
    $el = cache[className]; 
    if ($(this).is(':checked')) 
     $el.show(); 
    else 
     $el.hide(); 

Answer 2

我了解，问题只与复选框，而不是在回调或jQuery的功能。我简单地通过使用无线电输入来解决问题，为页面中的每个复选框添加“真”和“假”无线电输入。