創建通用的JavaScript/jQuery的ajax功能

我是新來javascript，jquery和ajax，需要幫助使我的代碼更有效率。我有以下的javascript/jQuery函數工作正常：創建通用的JavaScript/jQuery的ajax功能

<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代碼，但我無法得到它的工作。

謝謝！

來源

2012-10-20 XanderNGCC

我更新了原有的描述：一個jQuery的函數，從選擇的對象調用它。 – XanderNGCC

好的經驗法則，如果你打算使用jQuery ......忘記內聯代碼像'onclick'或'onchange'一樣存在，並獨自使用jQuery不顯眼的方法 – charlietfl

而不是使用內聯的「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-20 19:20:34 McGarnagle

沒有'onchange'屬性！？ – feeela

@feela [當然有]（http://www.w3.org/TR/html4/interact/forms.html#edef-SELECT） – MikeM

我會嘗試這種方法，看看我能否實現它。每個結果元素都是不同的值，我並不總是使用全部10個選擇菜單（由用戶決定輸入多少數據），所以我認爲第二種方法是好的。我會看看我能否得到它。 – XanderNGCC

聽起來像你的選擇框看起來像

<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-20 19:20:43 MikeM

這是你應該寫一個小插件的情況。看看它是如何可以像（我did'nt得到你需要的exectly但你會把握的想法）：

$.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-20 19:21:45 dfsq

您可以設置基於由dbaseman修改建議

$.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-20 19:22:22 feeela

創建通用的JavaScript/jQuery的ajax功能

回答

相關問題