2

我是 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 代码，但我无法让它工作。

谢谢！

4

4 回答 4

2

这是您应该编写一个小插件的情况。看看它的样子（我没有得到你需要的东西，但你会掌握这个想法）：

$.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();
于 2012-10-20T19:21:45.413 回答
1

我不会使用内联的“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....
于 2012-10-20T19:20:34.913 回答
0

您可以设置一个 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();
于 2012-10-20T19:22:22.910 回答
0

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

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

为每个添加一个类

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

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

$(".promo").change(function() {
    ...
});
于 2012-10-20T19:20:43.920 回答