javascript - 创建通用 Javascript/Jquery ajax 函数

Question

我是 javascript、jquery 和 ajax 新手，需要帮助使我的代码更高效。我有以下 javascript/jquery 函数，可以正常工作:

 <script type="text/javascript">
    $(document).ready(function()
    {
        $("#promo1").change(function() //select menu id that triggers script on change
        {
           //data here

            $.ajax
            ({
               //ajax stuff here
                {
                    //individual values from json array


                    //set each value textbook value
                    $("#discprice1").val(disc);
                    $("#itemprice1").val(total);
                    $("#tax").val(tax);
                    $("#grandtotal").val(grand);
                }
            });

        });

    });
    </script>

根据建议，我将原来的函数更改为:

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

            $("#promo" + index).on("change", function() //select menu id that triggers script on change
            {
 //rest of the function is here....

并将我的选择更改为:

   <select name="promo<?php echo $i; ?>" id="promo<?php echo $i; ?>" 
onchange="setupCalculation('<?php echo $i; ?>');">

但是，它不起作用。我错过了什么？

但是，我需要对 10 行不同的计算执行相同的操作 10 次。我怎样才能做到这一点，以便我可以通用地使用这个函数，只需将选择框的“id”传递给函数，而不是为每个选择器重复此代码 10 次，例如#promo1、#promo2、#promo3 等...

我假设我需要添加 onchange="javascript function here();"到 html 代码，但我无法让它工作。

谢谢!

Answer 1

在这种情况下，您应该编写一个小插件。看看它是什么样子的(我没有得到你到底需要什么，但你会理解这个想法):

$.fn.myFirstPlugin = functin() {
    return this.each(function() {
        // This is currect select box  
        var $select = $(this);

        // Change event
        $select.change(function() {
            // Do something for this select box; $(this) will point to current select element
            $.ajax({ ... })
        });
    })
};

然后你会像这样使用它:

$('#promo1, #promo2, #promo3').myFirstPlugin();