0

自動見積もりを作成する方法として、ユーザーがアイテム/価格のリストを選択/選択解除できるようにする次の JQuery があります。コードは次のようになります。

$('table.products > tbody > tr').click(function(){
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100);
    } else {
        $(this).siblings('div.price, img.selected').fadeIn(100);                    
    }
    recalc();
});

実際にはそれよりも複雑です（したがって、使用していない理由がありますtoggle()が、上記はこの質問の目的のための単純化された例です.

とにかく、上記のコードは正常に動作します。表の行をクリックすると、価格がすでに表示されているかどうかに応じて、価格と画像が選択/選択解除されます。

次に、最後に呼び出される関数への呼び出しがありrecalc();ます..次のようになります(これも簡略化されたバージョンです):

function recalc() {
    var numOfProducts = $('table.products div.price:visible').length;
    alert(numOfProducts);
}

ここで私が抱えている問題は、何かが変更される前にアラートが常に正しい値を返すことです。

たとえば、div.price表示されていない場合に 1 つを選択すると、1 つが表示されますが、アラートが表示されます0。1次に、別のものを選択すると、2が表示されますが、クリックしたときのアラートのみが表示されます。次に、選択を解除するために既にクリックしたアイテムの1つをクリックすると、それが表示されます2

それで、私の質問は、他のすべてが行われた後に関数呼び出しが確実に行われるようにするにはどうすればよいですか?

4

2 に答える 2

0

私のアプローチは完全に間違っているという結論に達しました。これは、この質問に対する回答を提案した人があまりいないという事実と、私が受けた回答が私がやろうとしていることを達成していないという事実に部分的に基づいています. おそらく、私の説明も十分に明確ではありませんでした。

したがって、選択した製品行の数の正確なレポートを取得するという最初の質問に対する私の解決策は、次のように JS でグローバル変数を作成することです。

window.config =
    {
        products : 0,
    };

次に、if ステートメントに行を追加して、何が起こったかに応じて変数をインクリメントまたはデクリメントします。

$('table.products > tbody > tr').click(function(){
    window.config.products = window.config.products - 1; // Decrement
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100);
    } else {
        window.config.products = window.config.products + 1; // Increment
        $(this).siblings('div.price, img.selected').fadeIn(100);                    
    }
});

これで、アプリケーションの開発を続けるためにいつでもアクセスできるグローバル変数に、選択した製品の数の正確な記録ができました。

于 2012-06-01T03:40:16.277 に答える