如何清理这个jQuery函数并使其更加灵活?

时间:2012-02-15 19:58:22

标签: javascript jquery

这是我的功能:

function DisplayGridElementsBasedOnCriteria(dataItem, propertyToEvaluate, shouldEqualvalue, selectorsToChange, hideSelectedElements, nameOfColumnContainingElements) {
if (propertyToEvaluate == shouldEqualvalue) {
    var $row = $(dataItem.row);
    if (nameOfColumnContainingElements == undefined) {
        if (hideSelectedElements) {
            $row.children("td").children(selectorsToChange).hide();

        }else {
            $row.children("td").children(selectorsToChange).show();
        }
    } else {
        $.each($row.children("td"), function (index, column) {
            var $column = $(column);
            var $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();
            if ($headerText == nameOfColumnContainingElements) {  
                if (hideSelectedElements) {
                    $column.children(selectorsToChange).hide();
                } else {
                    $column.children(selectorsToChange).show();
                }
            }

        });
    }

}

}

以这种方式使用:

 <script type="text/javascript">
    function onRowDataBound(e) {
        DisplayGridElementsBasedOnCriteria(e, e.dataItem.Status, "Submitted", "a.t-grid-delete, a.t-grid-Edit", true, "Actions");
    }
</script>

我不是很擅长jQuery / javascript,它按照我想要的方式工作,但它似乎有点复杂和臃肿。

任何人都可以提供更清洁的版本吗?

这里的答案是更清洁的版本:

function DisplayGridElementsBasedOnCriteria(dataItem, propertyToEvaluate, shouldEqualvalue, selectorsToChange, hideSelectedElements, nameOfColumnContainingElements) {
if (propertyToEvaluate === shouldEqualvalue) {
    var $row = $(dataItem.row);

    if (nameOfColumnContainingElements === undefined) {
            $row.children("td").children(selectorsToChange).toggle(!hideSelectedElements);
    } 
    else {
        $row.children("td").each(function (index, column) {
            var $column = $(column),
                $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();

            if ($headerText === nameOfColumnContainingElements) {  
                    $column.children(selectorsToChange).toggle(!hideSelectedElements);
            }

        });
    }  
}

}

1 个答案:

答案 0 :(得分:2)

至于清理:

  • 您可以使用.toggle(bool)代替.show / .hide if / else条款。
  • 您可以var链接var a = 1, b = 2
  • 您可能希望使用===来避免JavaScript的怪癖。
  • 您可以使用$(...).each代替$.each($(...)