Question

注意：我将此添加到this link找到的JSFIDDLE

我编写了一些基本的jQuery代码来处理3个表中的一个表中的行，处理几个按钮点击和复选框。我现在感觉非常像n00b。我正在看这个，并意识到有太多可以变成更通用的函数，但我不熟悉创建JS函数。任何指针都会受到欢迎。

由于我有类似功能的块，我更愿意讨论如何简化每种块类型。

buttonSwap
选择/取消检查清单
移动核对清单
显示/隐藏面板

以下是代码：

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {

        $('#displayActivePanel').hide();
        $('#displayInactivePanel').hide();

        // Button event handlers to move items from/to differing tables...
        $('#TableAdminPortfolio tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var stat = tr.children('.padLeft.status').text().trim();
            var tableActiveProjects = $('#TableActiveProjects tbody');
            var tableInactiveProjects = $('#TableInactiveProjects tbody');

            tr.fadeOut(1000);
            if (stat == 'Active') {
                tableActiveProjects.prepend(tr);
            } else {
                tableInactiveProjects.prepend(tr);
            }
            tr.fadeIn(1000);
        });

        $('#TableActiveProjects tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');

            tr.fadeOut(1000);
            tableAdminPortfolio.prepend(tr);
            tr.fadeIn(1000);
        });

        $('#TableInactiveProjects tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');

            tr.fadeOut(1000);
            tableAdminPortfolio.prepend(tr);
            tr.fadeIn(1000);
        });

        $('#masterCheckBoxAdminPortfolio').live('change', function () {
            var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined;

            var list = $('#TableAdminPortfolio .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });
        $('#TableActiveProjectsCheckbox').live('change', function () {
            var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined;

            var list = $('#TableActiveProjects .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });
        $('#TableInactiveProjectsCheckbox').live('change', function () {
            var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined;

            var list = $('#TableInactiveProjects .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });

        $('#TableAdminPortfolioRemoveAllChecked').live('click', function () {
            var list = $('#TableAdminPortfolio .CheckBoxProjects');
            list.each(function () {
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    var tr = $(this).closest('tr');
                    var stat = tr.children('.padLeft.status').text().trim();
                    var tableActiveProjects = $('#TableActiveProjects tbody');
                    var tableInactiveProjects = $('#TableInactiveProjects tbody');

                    tr.fadeOut(1000);
                    if (stat == 'Active') {
                        tableActiveProjects.prepend(tr);
                    } else {
                        tableInactiveProjects.prepend(tr);
                    }
                    tr.fadeIn(1000);
                }
            });
        });
        $('#TableActiveProjectsAddAllChecked').live('click', function () {
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');
            var list = $('#TableActiveProjects .CheckBoxProjects');
            list.each(function () {
                var tr = $(this).closest('tr');
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    tr.fadeOut(1000);
                    tableAdminPortfolio.prepend(tr);
                    tr.fadeIn(1000);
                }
            });
        });
        $('#TableInactiveProjectsAddAllChecked').live('click', function () {
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');
            var list = $('#TableInactiveProjects .CheckBoxProjects');
            list.each(function () {
                var tr = $(this).closest('tr');
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    tr.fadeOut(1000);
                    tableAdminPortfolio.prepend(tr);
                    tr.fadeIn(1000);
                }
            });
        });

        $('#showActivePanel').click(function () {
            $('#displayActivePanel').show();
        });
        $('#hideActivePanel').click(function () {
            $('#displayActivePanel').hide();
        });
        $('#showInactivePanel').click(function () {
            $('#displayInactivePanel').show();
        });
        $('#hideInactivePanel').click(function () {
            $('#displayInactivePanel').hide();
        });
    });
}
</script>

Answer 1

没有html，很难测试任何东西。但这完全是在飞行中，因为我喜欢挑战而且我很无聊。至少，它应该为您提供函数的起点...如何将项传递给函数，以及函数如何使用这些参数。

$(document).ready(function () {
function hideIt($item) {
    $item.hide();
}

function prependPortfolio($tr,$portfolio){
    $tr.fadeOut(1000);
    $portfolio.prepend($tr);
    $tr.fadeIn(1000);
}

function setCheck($check,$list){
    $list.each(function(){
        $(this).prop('checked',$check);
    }
}

function moveItems($tr,$stat,$active,$inactive){
    $tr.fadeOut(1000);
    if ($stat == 'Active') {
        $active.prepend($tr);
    } else {
        $inactive.prepend($tr);
    }
    $tr.fadeIn(1000);
}

function addAllChecked($check,$list){
    $list.each(function () {
        var $tr = $(this).closest('tr'),
            $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
        if ($check) {
            prependPortfolio(tr,tableAdminPortfolio);
        }
    });
}

hideIt($('#displayActivePanel'));
hideIt($('#displayInactivePanel'));

// Button event handlers to move items from/to differing tables...
$('#TableAdminPortfolio tbody .buttonSwap').live('click', function () {
    var tr = $(this).closest('tr'),
        stat = tr.children('.padLeft.status').text().trim(),
        tableActiveProjects = $('#TableActiveProjects tbody'),
        tableInactiveProjects = $('#TableInactiveProjects tbody');

    moveItems(tr,stat,tableActiveProjects,tableInactiveProjects);
});

$('#TableActiveProjects tbody .buttonSwap').on('click', function () {
    var tr = $(this).closest('tr'),
        tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody');

    prependPortfolio(tr,tableAdminPortfolio);
});

$('#TableInactiveProjects tbody .buttonSwap').on('click', function () {
    var tr = $(this).closest('tr'),
        tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody');

    prependPortfolio(tr,tableAdminPortfolio);
});

$('#masterCheckBoxAdminPortfolio').on('change', function () {
    var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined,
        list = $('#TableAdminPortfolio .CheckBoxProjects');

    setCheck(isChecked,list);
});
$('#TableActiveProjectsCheckbox').on('change', function () {
    var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined,
        list = $('#TableActiveProjects .CheckBoxProjects');

    setCheck(isChecked,list);
});
$('#TableInactiveProjectsCheckbox').on('change', function () {
    var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined,
        list = $('#TableInactiveProjects .CheckBoxProjects');

    setCheck(isChecked,list);
});

$('#TableAdminPortfolioRemoveAllChecked').on('click', function () {
    var $list = $('#TableAdminPortfolio .CheckBoxProjects');

    $list.each(function () {
        var $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
        if ($check) {
            var tr = $(this).closest('tr'),
                stat = tr.children('.padLeft.status').text().trim(),
                tableActiveProjects = $('#TableActiveProjects tbody'),
                tableInactiveProjects = $('#TableInactiveProjects tbody');

            moveItems(tr,stat,tableActiveProjects,tableInactiveProjects);
        }
    });
});

$('#TableActiveProjectsAddAllChecked').on('click', function () {
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'),
        list = $('#TableActiveProjects .CheckBoxProjects');

    addAllChecked(tableAdminPortfolio,list);
});

$('#TableInactiveProjectsAddAllChecked').on('click', function () {
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'),
        list = $('#TableInactiveProjects .CheckBoxProjects');

    addAllChecked(tableAdminPortfolio,list);
});

$('#showActivePanel').on('click',function(){
    $(this).toggle();
});

$('#showInactivePanel').on('click',function(){
    $(this).toggle();
});
});

这应该可行，因为我只是复制并粘贴并移动了一些东西，但对此保证零。我真正做的唯一改变其设置方式的是，不是单独声明每个变量，而是可以在一个大型声明中用逗号分隔它们。

简化JQuery代码？

1 个答案: