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次相同的操作。我怎样才能做到这一点，我可以一般性地使用这个功能，只需传递＆＃34; id＆＃34;对于该函数的选择框，并且对于每个选择器不重复该代码10次，例如， #promo1，＃promo2，＃promo3等......

我假设我需要在这里添加onchange =＆＃34; javascript函数（）;＆＃34;对于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();

Answer 2

我不会使用内联的“onchange”属性，而是使用当前的方法来连接事件处理程序。这样你就可以定义一个函数setupCalculation，它连接给定选择列表的逻辑。

$(document).ready(function() {

    var setupCalculation = function(id) {
        $("#" + id).on("change", function() {
            // ajax/calculation logic
        });
    }

    setupCalculation("promo1");
    setupCalculation("promo2");
    // ...etc
});

如果结果元素不同（例如discprice2，discprice3等），那么最好将索引传递给函数，并对id的名称部分进行硬编码：

var setupCalculation = function(index) {
    $("#promo" + index).on("change", function() {

        // ajax stuff 
        $("#discprice" + index).val(disc);
        // etc
    });
}

修改使用表单onchange=setupCalculation()，该函数应如下所示（无需连接更改事件）：

$(document).ready(function()
{
    window.setupCalculation = function(index) {
       //rest of the function is here....

Answer 3

听起来像您的选择框看起来像

<select id="promo1">...</select>
<select id="promo2">...</select>

为每个人添加一个

<select id="promo1" class="promo">...</select>
<select id="promo2" class="promo">...</select>

这样您就可以使用一个简单的选择器为change事件函数选择所有框：

$(".promo").change(function() {
    ...
});

Answer 4

您可以设置jQuery函数并从所选对象中调用它：

$.fn.changePromo = function() {
    /* return this jQuery object to allow chaining and execute in an 'each()' to allow multiple elements */
    return this.each( function() {
        $( this ).change( function() {
            /* your ajax call here */
        } );
    } );
}

/* call examples */
$( '#promo1' ).changePromo();
$( '#promo1,#promo2' ).changePromo();

创建通用Javascript / Jquery ajax函数

4 个答案: