Question

我的酒店房间的相关价格下降了国籍。现在我想动态添加显示的价格并输出。

<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>

每个房间可能有超过1个房间和以上选项。现在我想动态更改总额作为输出的价格。感谢

Answer 1

好吧，伙计们，我想我无法正确理解我的问题，但我找到了解决方案。

<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>

无论如何，感谢你们宝贵的时间和抱歉，如果我不能给你这个主意。

Answer 2

Sammy我想你会发现你的解决方案简化了这个：

$(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');
});

通过触发选择菜单＆＃39; ＆＃39;变更＆＃39;事件，您将避免重复总计算并导致显示最初选择的价格。

Answer 3

您需要清除每次更改的总计，否则它会不断加起来：

$(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，因为那不会真正需要每个循环，并且会清除变量，就好像你没有，它们会是全球性的，如果以美元开头无关紧要，它们仍然应该被var关键字删除。

作为旁注，roomprice不是有效属性，HTML5数据属性是更好的选择。

Answer 4

试试这个

 $(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); 
    })
  })

如何使用jquery动态获取总计

4 个答案: