0

注意：我将此添加到在此链接中找到的 JSFIDDLE

我编写了一些基本的 jQuery 代码来操作 3 个表之一中的行，处理几个按钮单击和复选框。我现在感觉很像一个n00b。我正在看这个并意识到有很多东西可以变成更通用的函数，但我并不精通创建 JS 函数。欢迎任何指点。

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

  • 按钮交换
  • 选择/取消选择清单
  • 移动检查清单
  • 显示/隐藏面板

这是代码：

   <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>
4

1 回答 1

0

没有 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();
});
});

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

于 2013-02-27T17:12:36.010 回答