有没有什么办法可以优化这段代码？

Question

我有一段代码会颠倒我窗体上的所有复选框。我有多个元素（不仅仅是复选框，而且还有<input type='text'>）。我需要优化它的原因是因为它需要大约两到三秒来选择所有复选框（现在275）。

这里是我的代码：

function FormInverse() { 
    var iCheckbox = 1; // Because there are multiple input elements, we need to distinquish the input element ID and the row id 
    var FormLength = document.FormFacturen.elements.length; 
    for (i=0; i < FormLength; i++) { 
     var FormElementType = document.FormFacturen.elements[i].type; 
     if (FormElementType == "checkbox") { 
      var Elements = document.getElementsByClassName('row' + iCheckbox); // Alle elementen in de array zetten 
      var iNumElements = Elements.length; 
      for (iElement=0; iElement < iNumElements; iElement++) { 
       if (document.FormFacturen[i].checked == true) { 
        Elements[iElement].className = "invoice-tr-standard row" + iCheckbox; 
       } else { 
        Elements[iElement].className = "invoice-tr-clicked row" + iCheckbox; 
       } 
      } 
      iCheckbox++; 
      document.FormFacturen[i].checked = !document.FormFacturen[i].checked; 
     } 
    } 
} 

这里是document.getElementsByClassName功能：

document.getElementsByClassName = function(cl) { 
    var retnode = []; 
    var myclass = new RegExp('\\b'+cl+'\\b'); 
    var elem = document.getElementsByTagName('*'); 
    for (var i = 0; i < elem.length; i++) { 
     var classes = elem[i].className; 
     if (myclass.test(classes)) retnode.push(elem[i]); 
    } 
    return retnode; 
}; 

Answer 1

我会建议使用jQuery。

试试这个：

增加提及jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" language="JavaScript"></script> 

使用此代码：

$(':checkbox').each(function() { 
    $(this).attr('checked', !$(this).attr('checked')); 
}); 

编辑： 或者用它来改变类和：

$(':checkbox').each(function() { 
    var checked = $(this).attr('checked'); 
    if (checked) { 
     $(this).attr('checked', false); 
     $(this).addClass('invoice-tr-clicked'); 
     $(this).removeClass('invoice-tr-standard');   
    } 
    else { 
     $(this).attr('checked', true); 
     $(this).addClass('invoice-tr-standard'); 
     $(this).removeClass('invoice-tr-clicked'); 
    } 
}); 

最终版本：

$('#FormFacturen :checkbox').each(function() { 
    var checked = $(this).attr('checked'); 
    if (checked) { 
     $(this).attr('checked', false); 
     $(this).parents('tr').addClass('invoice-tr-clicked'); 
     $(this).parents('tr').removeClass('invoice-tr-standard');   
    } 
    else { 
     $(this).attr('checked', true); 
     $(this).parents('tr').addClass('invoice-tr-standard'); 
     $(this).parents('tr').removeClass('invoice-tr-clicked'); 
    } 
}); 

Answer 2

你应该看看像jQuery库。它会很好地处理这种事情。

虽然有很多小事情可以改善您的代码。我注意到的第一件事是你的getElementsByClassName函数在你每次调用它时遍历页面上的所有元素。你可以改变这一行：

var elem = document.getElementsByTagName('*'); 

只得到输入元素：

var elem = document.getElementsByTagName('input'); 

Answer 3

到getElementsByClassName每次调用是昂贵的，它被称为在你的每个通行证循环。

除了@杰夫的建议，你可以调用document.getElementsByTagName('input');只是一次，而不是每次都getElementsByClassName被调用，并缓存结果为你的循环中使用。

这需要对您的getElementsByClassName函数进行小小的修改，从而它接受要搜索的元素数组。

document.getElementsByClassName = function(cl, eles) { 
    var retnode = []; 
    var myclass = new RegExp('\\b'+cl+'\\b'); 
    var len = eles.length; 
    for (var i = 0; i < len; i++) { 
     var classes = eles[i].className; 
     if (myclass.test(classes)) retnode.push(eles[i]); 
    } 
    return retnode; 
}; 


function FormInverse() { 
    // cache all inputs 
    var inputs = document.getElementsByTagName("input"); 
    ... 
    // later 
    var Elements = document.getElementsByClassName('row' + iCheckbox, inputs); 

Answer 4

我非常肯定的瓶颈这里是getElementsByClassName功能，浏览器需要每次都找到自己的元素重新扫描整个HTML。我建议你给你的元素一个唯一的ID id="row1",id="row2"，...而不是一个独特的类名称，并使用getElementById这是更快。

var Elements = document.getElementsById('row' + iCheckbox);