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>

可能有超过 1 个房间和每个房间的上述选项。现在我想根据输出的价格动态更改总数。谢谢

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

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

通过触发选择菜单的“更改”事件，您将避免重复总计算并显示最初选择的价格。

于 2012-12-28T08:43:47.250 回答
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，因为这实际上不需要每个循环，并清除变量，就好像您不需要一样，它们将是全局的，如果它们以 $sign 开头并不重要，它们仍应使用var关键字清除。

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

于 2012-12-26T10:00:17.753 回答
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 回答