想要重复使用jQuery函数制作函数

时间:2016-10-21 19:54:49

标签: php jquery dry

<script>
    // Roti6p20tk
    $(function () {
        $("#distributedPacketForRoti6p20tk, #bonusForRoti6p20tk, " +
            "#replaceForRoti6p20tk, #returnForRoti6p20tk").on("keydown keyup", sumForRoti6p20tk);
        function sumForRoti6p20tk() {
            $("#totalSalePacketForRoti6p20tk").val(Number($("#distributedPacketForRoti6p20tk").val())
                - Number($("#bonusForRoti6p20tk").val()) -
                Number($("#replaceForRoti6p20tk").val()) - Number($("#returnForRoti6p20tk").val())
            );

            $("#salesInAmountForRoti6p20tk").val(Number($("#totalSalePacketForRoti6p20tk").val()) * 20
            );
        }
    });

    // Roti4p14tk
    $(function () {
        $("#distributedPacketForRoti4p14tk, #bonusForRoti4p14tk, " +
            "#replaceForRoti4p14tk, #returnForRoti4p14tk").on("keydown keyup", sumForRoti4p14tk);
        function sumForRoti4p14tk() {
            $("#totalSalePacketForRoti4p14tk").val(Number($("#distributedPacketForRoti4p14tk").val())
                - Number($("#bonusForRoti4p14tk").val()) -
                Number($("#replaceForRoti4p14tk").val())
                - Number($("#returnForRoti4p14tk").val())
            );

            $("#salesInAmountForRoti4p14tk").val(Number($("#totalSalePacketForRoti4p14tk").val()) * 14
            );
        }
    });

    // final sum For Roti
    $(function () {
        $("#extSaleForRoti6p20tk, #extSalesForRoti4p14tk, " +
            " #dueReceivedForRoti, #dueInAmountForRoti, " +
            "#expAndComForRoti").on("keydown keyup", finalsumForRoti);
        function finalsumForRoti() {
            $("#totalSaleAmountForRoti").val(Number($("#extSaleForRoti6p20tk").val())
                + Number($("#extSalesForRoti4p14tk").val()) +
                Number($("#salesInAmountForRoti6p20tk").val())
                + Number($("#salesInAmountForRoti4p14tk").val())
            );

            $("#totalReceivedForRoti").val(Number($("#totalSaleAmountForRoti").val())
                + Number($("#dueReceivedForRoti").val())
                - Number($("#dueInAmountForRoti").val())
                - Number($("#expAndComForRoti").val())
            );
        }
    });

</script>

这是html代码

This is my HTML code With Jquery function

我想重用这些jquery函数。我只想发送参数然后这个函数将为所有人做同样的工作。

以上这些功能与我发送参数的功能相同。 如何重复使用jquery函数而无需一次又一次地复制粘贴?  你能告诉我方法还是教程?

我想重用代码。我需要它五次以上。但我需要复制粘贴它并更改id或变量,但我想创建一个可以做同样的功能。我需要每次都发送参数。 :)

1 个答案:

答案 0 :(得分:2)

您可以编写一个Javascript函数,将ID列表作为参数。

function sumForFields(totalid, salesid, inputids, salesmultiplier) {
    $(inputids.join(',')).on("keydown keyup", function() {
        var total = Number($(inputids[0]).val());
        for (var i = 1; i < inputids.length; i++) {
            total -= Number($(inputids[i]).val());
        }
        $(totalid).val(total);
        $(salesid).val(total * salesmultiplier);
    });
}

然后你可以写:

sumForFields('#totalSalePacketForRoti6p20tk', '#salesInAmountForRoti6p20tk', 
            ['#distributedPacketForRoti6p20tk', '#bonusForRoti6p20tk', '#replaceForRoti6p20tk', '#returnForRoti6p20tk'], 
            20);

这是前两个功能。最后一个具有不同的结构,因为它在组合字段时混合加法和减法,而不是像前两个那样减去所有内容。