javascript - 使用选择选项更新动态生成的两个盒子的价格

Question

我试图在 jQuery 文档的帮助下完成这项工作，但到目前为止还没有成功。

我有两个具有 0 初始值的框 paynow 和 payfull，但我正在用产品价格动态填充这些框(jQuery)。

现在我必须通过选择折扣价格选项进一步更新这些值(乘以数据百分比)。这是 HTML。

<select class="discount">
  <option data-percent="0">Select Discount Coupon</option>
  <option data-percent="5">ABCD</option>
  <option data-percent="10">EFGH</option>
  <option data-percent="15">IJKL</option>
</select>

<span class="price" id="paynow">$0.00</span>
<span class="price" id="payfull">$0.00</span>

编辑:jQuery 代码

$(document).ready(function() {

  // For Calculator
  function Cost_Calculator() {

    var Currency = '$';
    var messageHTML = 'Please contact us for a price.';

    function CostFilter(e) {
      return e;
    }

    //Calculate function
    function calculate() {

      //Blank!
      var CalSaveInfo = [];
      $('#cost_calc_custom-data, #cost_calc_breakdown').html('');

      //Calculate total
      var calCost = 0;
      var calculate_class = '.cost_calc_calculate';
      $('.cost_calc_active').each(function() {

        //Calculation
        calCost = calCost + parseFloat($(this).data('value'));

        //Add to list
        var optionName = $(this).attr('value');
        var appendName = '<span class="cost_calc_breakdown_item">' + optionName + '</span>';

        var optionCost = $(this).attr('data-value');
        var appendCost = '<span class="cost_calc_breakdown_price">' + Currency + optionCost + '</span>';

        if (optionCost != "0") {
          var appendItem = '<li>' + appendName + appendCost + '</li>';
        }

        //hidden data
        var appendPush = ' d1 ' + optionName + ' d2 d3 ' + optionCost + ' d4 ';

        $('#cost_calc_breakdown').append(appendItem);

        CalSaveInfo.push(appendPush);

      });

      //Limit to 2 decimal places
      calCost = calCost.toFixed(2);

      //Hook on the cost
      calCost = CostFilter(calCost);

      var CustomData = '#cost_calc_custom-data';
      $.each(CalSaveInfo, function(i, v) {
        $(CustomData).append(v);
      });

      //Update price
      if (isNaN(calCost)) {
        $('#paynow').html(messageHTML);
        $('#payfull').html(messageHTML);
        $('.addons-box').hide();
      } else {
        $('#paynow').html(Currency + calCost);
        $('#payfull').html(Currency + calCost);
        $('.addons-box').show();
      }

    }

    //Calculate on click
    $('.cost_calc_calculate').click(function() {

      if ($(this).hasClass('single')) {
        //Add cost_calc_active class
        var row = $(this).data('row');
        //Add class to this only
        $('.cost_calc_calculate').filter(function() {
          return $(this).data('row') == row;
        }).removeClass('cost_calc_active');
        $(this).addClass('cost_calc_active');
      } else {
        // Remove class if clicked
        if ($(this).hasClass('cost_calc_active')) {
          $(this).removeClass('cost_calc_active');
        } else {
          $(this).addClass('cost_calc_active');
        }
      }

      //Select item
      var selectItem = $(this).data('select');
      var currentItem = $('.cost_calc_calculate[data-id="' + selectItem + '"]');
      var currentRow = currentItem.data('row');

      if (selectItem !== undefined) {
        if (!$('.cost_calc_calculate[data-row="' + currentRow + '"]').hasClass('cost_calc_active'))
          currentItem.addClass('cost_calc_active');
      }

      //Bring in totals & information
      $('#cost_calc_breakdown_container, #cost_calc_clear_calculation').fadeIn();
      $('.cost_calc_hide').hide();
      $('.cost_calc_calculate').each(function() {
        calculate();
      });

      return true;
    });

    $('#cost_calc_clear_calculation').click(function() {
      $('.cost_calc_active').removeClass('cost_calc_active');
      calculate();
      $('#cost_calc_breakdown').html('<p id="empty-breakdown">Nothing selected</p>');
      return true;
    });
  }

  //Run cost calculator
  Cost_Calculator();

});

Answer 1

这个怎么样:

var totalPayNowPrice=parseFloat($('#paynow').text());
var totalPayFullPrice=parseFloat($('#payfull').text());
$('.discount').on('change',function(){  
    if(parseInt($('.discount option:selected').attr('data-percent'))){

    $('#paynow').text((totalPayNowPrice*parseInt($('.discount option:selected').attr('data-percent')))+'$');

    $('#payfull').text((totalPayFullPrice*parseInt($('.discount option:selected').attr('data-percent')))+'$');
}
});

只需将 $ 符号放在数字后面的 span 中，解析函数就可以工作。

JSFIDDLE

更新

从另一个 Angular 来看，我认为有一个更好的解决方案来使用原型(prototype)并将当前价格存储在全局变量中，然后您可以在任何您想要的地方使用它们。这里是供您使用的伪原型(prototype)，如果您想使用以下方法自定义它:

function Test(){
    this.totalPayNowPrice=1;//the is 1 only for check code working
    this.totalPayFullPrice=1;
}
Test.prototype={

    init: function(){
        var scope=this;
        $('.discount').on('change',function(){  
          if(parseInt($('.discount option:selected').attr('data-percent'))){
            $('#paynow').text((scope.totalPayNowPrice*parseInt($('.discount option:selected').attr('data-percent')))+'$');

            $('#payfull').text((scope.totalPayFullPrice*parseInt($('.discount option:selected').attr('data-percent')))+'$');
         }
    },
   updatePaynowPrice:function(newPrice){
        this.totalPayNowPrice=totalPayNowPrice;
    },

   updatePayfullPrice:function(newPrice){
          this.totalPayFullPrice=totalPayNowPrice;
    }  
}