2

ホテルの部屋に関連する価格を含む国籍のドロップダウンがあります。表示されている価格を動的に追加して出力したいと思います。

<div class="Total"></div>
<div class="rum_name">Room name</div>
<div class="nationality">
<select class="sel_nationality" name="nationality">
<option roomprice="30" value="63">SAARC</option>
<option roomprice="50" selected="selected" value="65">American/ European</option>
<option roomprice="45" value="67">Japnese/ Korean</option>
<option roomprice="38" value="69">All Others</option>
</select>
<div class="Price">
Price:
<span class="selectedPrice"></span>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var total = 0;
        $('.sel_nationality').change(function(){
            $price = $('option:selected', this).attr('roomprice');
            $parent = $(this).parents('.nationality');
            $parent.find('span.selectedPrice').text($price);
            $tot_price = $(this).val();
            $(this).each(function(){
                total += parseInt(this.value);
            })
           $('.Total').text(total); 
        })
           })
</script>

複数の部屋があり、それぞれに上記のオプションがある場合があります。出力された価格ごとに合計を動的に変更したいと思います。ありがとう

4

4 に答える 4

3

皆さん、私はあなたに私の問題の正しい考えを与えることができないと思いますが、解決策を見つけました.

<script type="text/javascript">
    $(document).ready(function(){
        var total = 0;
        $('.selectedPrice').each(function(){
            total = +$(this).text()+ total;
        });
        $('.Total').text(total); 
        $('.sel_nationality').change(function(){
            $price = $('option:selected', this).attr('roomprice');
            $parent = $(this).parents('.nationality');
            $parent.find('span.selectedPrice').text($price);
            var total = 0;
            $('.selectedPrice').each(function(){
                total = +$(this).text()+ total;
            });
           $('.Total').text(total); 

        })


    })
</script>

とにかく、皆さんの貴重な時間をありがとうございました。

于 2012-12-26T10:59:54.870 に答える
1

サミーあなたのソリューションがこれに単純化されることがわかると思います：

$(document).ready(function() {
    $('.sel_nationality').change(function() {
        var $price = $('option:selected', this).attr('roomprice');//remember to localize vars
        $(this).closest('.nationality').find('.selectedPrice').text($price);
        var total = 0;
        $('.selectedPrice').each(function() {
            total += Number($(this).text());
        });
        $('.Total').text(total);
    }).trigger('change');
});

選択メニューの「変更」イベントをトリガーすることにより、合計計算を繰り返す必要がなくなり、最初に選択された価格が表示されます。

于 2012-12-28T08:43:47.250 に答える
0

これを試して

 $(document).ready(function(){

    $('.sel_nationality').change(function(){
        var total = 0; //let the total be 0 whenever the chnages is made
        $price = $('option:selected', this).attr('roomprice');
        $parent = $(this).parents('.nationality');
        $parent.find('span.selectedPrice').text($price);
        $tot_price = $(this).val();
        $(this).each(function(){
            total += parseInt(this.value);
        })
       $('.Total').text(total); 
    })
  })
于 2012-12-26T10:04:07.763 に答える
0

変更ごとに合計をクリアする必要があります。そうしないと、合計が増え続けます。

$(document).ready(function() {
    $('.sel_nationality').on('change', function() {
        var total = 0,  //reset the total, notice commas declearing vars
            $price = $('option:selected', this).attr('roomprice'),
            $parent = $(this).parents('.nationality'),
            $tot_price = this.value;

        $parent.find('span.selectedPrice').text($price);

        $('.sel_nationality').each(function() { //iterate all, not just this one
            total += parseInt(this.value, 10);  //use radix
        });
        $('.Total').text(total);
    });
})​;​

だけでなく、すべての.sel_nationality要素を反復処理する必要がありthisます。これは、実際には each ループを必要としないためです。変数を宣言しない場合と同じように、変数はグローバルになり、ドル記号で始まるかどうかは問題ではありません。 、varキーワードで宣言する必要があります。

roomprice補足として、は有効な属性ではありません。HTML5 のデータ属性を選択することをお勧めします。

于 2012-12-26T10:00:17.753 に答える