Question

我需要.li来更新其文本以响应用户的选择。有三个切换开关（当前调整.li没有问题），两组单选按钮和一个HTML5滑块。两组单选按钮和滑块可以很好地协同工作，并在div中显示结果值。

我现在需要的是将div中显示的值添加到.li中的值，并在用户更改无线电选择或移动滑块时调整（就像在显示的值中一样） div）。

我有这个.li：

<li id="pricing" class="price"><i>$</i><span>850</span></li>

此代码使开关根据每个开关的位置更改.li中的文本：

(function($){
$(function(){
$('.cmn-toggle').each(function () {
$(this).change(function() {
var curr_class = '.' + $(this).attr('id');
var price = $(this).attr('data-price');
var price_box = $('.pricing-table li.price span');
$(curr_class).toggleClass('active');
if (price) {
  if ($(curr_class).hasClass('active')) {
    price_box.html(parseInt(price_box.html()) + parseInt(price));
  }
  else {
    price_box.html(parseInt(price_box.html()) - parseInt(price));
  }
}
});
});
});
})(jQuery);

此代码从每组无线电和滑块中获取用户选择的值，并将其显示在div中：

function calculateTotal(){
var multi = document.getElementById('textInput').value;
var arr = document.getElementsByName('selectMedia');
var arry = document.getElementsByName('selectLength');
var tot=0;
for(var i=0; i<arr.length; i++){
    if(arr[i].checked){
        tot += Number(arr[i].value);
    }
}
for(var i=0; i<arry.length; i++){
    if(arry[i].checked){
        tot += Number(arry[i].value);
    }
}   
document.getElementById('totalPrice').innerHTML = tot * Number(multi);
}

现在我需要根据totalPrice中的值动态更新.li？如果.li为850且totalPrice更改为37，则.li需要显示887.如果totalPrice更改为100，则.li需要读取950.

A jsfiddle with the rest of the code used.

动态更新到.li文

0 个答案: