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」を関数に渡すだけで、#promo1、#promo2、#promo3 などのセレクターごとにこのコードを 10 回繰り返さないようにするにはどうすればよいですか? ....

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、disprice3 など)、代わりに関数にインデックスを渡し、id の名前部分をハードコーディングする方がよい場合があります。

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

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

編集form を使用するonchange=setupCalculation()と、関数は次のようになります (変更イベントを接続する必要はありません)。

$(document).ready(function()
{
    window.setupCalculation = function(index) {
       //rest of the function is here....
于 2012-10-20T19:20:34.913 に答える
0

選択ボックスが次のように見えるように聞こえます

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

それぞれにクラスを追加します

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

changeイベント関数の 1 つの単純なセレクターですべてのボックスを選択できるようにします。

$(".promo").change(function() {
    ...
});
于 2012-10-20T19:20:43.920 に答える
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 に答える