Javascript/Jquery - 计算值并显示在 div 内

Question

我必须写下一个方案来向您展示我正在努力开发的东西。如下图所示，有一个收音机和一个 select 区域。根据用户在这两个方面的选择，函数中需要考虑不同的值。红色值与下拉列表相关。如果您在下拉列表中选择 op1 和 "a"，则 "a" 将为 2160。如果您在下拉列表中选择 op3 和 "c"，则 "c" 将为 3888，依此类推。总数将显示在#total div 中，与无线电和下拉列表中的选择相关的值将显示在其他两个 divs #subRadio 和 #subDrop 中（已显示的值添加到无线电值）。

当我试图解决它时，我得到了一大堆实际上根本不起作用的假设，所以我请求你们帮助解决这个问题。

以防万一有人问，我会把我开始写的代码放在这里：

<form class="form-horizontal text-left" id="meishi">
  <div class="form-group">
    <div class="col-lg-2 topic">
      <label>Design</label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" name="design" value="10800">op1
      </label>
    </div>
    <div class="col-lg-4">
      <label class="radio-inline">
        <input type="radio" name="design" value="14040">op2
      </label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" name="design" value="16200">op3
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-2" for="qtt">Quantity</label>
    <select id="qtt" class="col-lg-3" name="qtt">
      <option value="">Choose one</option>
      <option value="a">100</option>
      <option value="b">200</option>
      <option value="c">300</option>
    </select>
  </div>
</form>


$(document).ready(function(){
  $("#msQtt").change(function(){
    var design = $('input[name=design]:checked').val();
    var qtt = $("#qtt option:selected").val();
    if(design  == "10800" && qtt == "a"){
      $('#subRadio').text('$ 10800')
      $('#subDrop').text('$ 2160')
      $('#total').text('$ 12960')
    }
    else if(design  == "10800" && qtt == "b"){
      $('#subRadio').text('$ 10800')
      $('#subDrop').text('$ 2484')
      $('#total').text('$ 13284')
    }
  });
});

非常感谢！

Answer 1

创建一个用于存储数据的对象：

var data = {
    'opt10800' : {
    'a' : 2160 ,
    'b' : 2484 ,
    'c' : 2808
  },
    'opt14040' : {
    'a' : 2808 ,
    'b' : 3132 ,
    'c' : 3456
  },
    'opt16200':  {
    'a' : 3240 ,
    'b' : 3564 ,
    'c' : 3888
  }
};

然后，当下拉菜单或单选按钮发生变化时，从对象中获取值并将它们放入 span 中：

$(function() {
  $('[name=design],[name=qtt]').on('change', function() {
    var r = $('[name=design]:checked').val() ,
        d = $('[name=qtt] option:selected').val();
    if( r != '' && d != '') {
      var s = data['opt'+r][d] ,
          t = parseInt( r ) + parseInt( s );
      $('#subRadio').text( r + ' + ' );
      $('#subDrop').text( s + ' = ' );
      $('#total').text( t );
    }
  });
});

完整演示：

var data = {
 'opt10800' : {
   'a' : 2160 ,
    'b' : 2484 ,
    'c' : 2808
  },
 'opt14040' : {
   'a' : 2808 ,
    'b' : 3132 ,
    'c' : 3456
  },
 'opt16200':  {
   'a' : 3240 ,
    'b' : 3564 ,
    'c' : 3888
  }
};


$(function() {
  $('[name=design],[name=qtt]').on('change', function() {
    var r = $('[name=design]:checked').val() ,
        d = $('[name=qtt] option:selected').val();
    if( r != '' && d != '') {
      var s = data['opt'+r][d] ,
          t = parseInt( r ) + parseInt( s );
      $('#subRadio').text( r + ' + ' );
      $('#subDrop').text( s + ' = ' );
      $('#total').text( t );
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left" id="meishi">
  <div class="form-group">
    <div class="col-lg-2 topic">
      <label>Design</label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" name="design" value="10800">op1
      </label>
    </div>
    <div class="col-lg-4">
      <label class="radio-inline">
        <input type="radio" name="design" value="14040">op2
      </label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" name="design" value="16200">op3
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-2" for="qtt">Quantity</label>
    <select id="qtt" class="col-lg-3" name="qtt">
      <option value="">Choose one</option>
      <option value="a">100</option>
      <option value="b">200</option>
      <option value="c">300</option>
    </select>
  </div>
</form>
<span id="subRadio"></span>
<span id="subDrop"></span>
<span id="total"></span>

Answer 2

尝试工作FIDDLE

已更新javascript

$(document).ready(function() {
  function UpdatePrice() {
    var CalMatrix = [{
        val1: 10800,
        val2: 'a',
        resultant: 2160
      }, {
        val1: 10800,
        val2: 'b',
        resultant: 2484
      }, {
        val1: 10800,
        val2: 'c',
        resultant: 2808
      },

      {
        val1: 14040,
        val2: 'a',
        resultant: 2808
      }, {
        val1: 14040,
        val2: 'b',
        resultant: 3132
      }, {
        val1: 14040,
        val2: 'c',
        resultant: 3456
      },

      {
        val1: 16200,
        val2: 'a',
        resultant: 3240
      }, {
        val1: 16200,
        val2: 'b',
        resultant: 3564
      }, {
        val1: 16200,
        val2: 'c',
        resultant: 3888
      }

    ];
    var design = $('input[name=design]:checked').val();
    var qtt = $("#qtt option:selected").val();

    var result = $.grep(CalMatrix, function(n) {
      return Number(n.val1) == Number(design) && n.val2 == qtt;
    });

    $('#subRadio').html('$ ' + String(result[0].val1))
    $('#subDrop').html('$ ' + String(result[0].resultant))
    $('#total').html('$ ' + parseInt(result[0].val1 + result[0].resultant, 10));
  }

  $('#qtt').on('change', function(e) {
    UpdatePrice(); // to calculate the price on change event
  });

UpdatePrice(); // to calculate the price on page load
});

编辑

已更新 FIDDLE、

也在无线电更改事件上附加了一个新的处理程序

$('#qtt, input[type=radio][name=design]').on('change', function(e) {
    UpdatePrice(); // to calculate the price on change event
});

希望对你有用。

Answer 3

希望这就是您要找的 DEMO

<form class="form-horizontal text-left" id="meishi">
  <div class="form-group">
    <div class="col-lg-2 topic">
      <label>Design</label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" data-drop-a="2160" data-drop-b="2484" data-drop-c="2808" name="design" value="10800">op1
      </label>
    </div>
    <div class="col-lg-4">
      <label class="radio-inline">
        <input type="radio" data-drop-a="2808" data-drop-b="3132" data-drop-c="3456" name="design" value="14040">op2
      </label>
    </div>
    <div class="col-lg-3">
      <label class="radio-inline">
        <input type="radio" data-drop-a="3240" data-drop-b="3564" data-drop-c="3888" name="design" value="16200">op3
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-2" for="qtt">Quantity</label>
    <select id="qtt" class="col-lg-3" name="qtt">
      <option value="">Choose one</option>
      <option value="a">100</option>
      <option value="b">200</option>
      <option value="c">300</option>
    </select>
  </div>
</form>

_

<script type="text/javascript">
$(document).ready(function(){
  $("input[name=design], #qtt").on('change',function(){
    var design = $('input[name=design]:checked');
    var designVal = parseInt(design.val());
    var qtt = $("#qtt").val();
    var subDrop=parseInt(design.data('drop-'+qtt));
    if (!subDrop) subDrop=0;
    if (!designVal) designVal=0;
    $('#subRadio').text(designVal)
    $('#subDrop').text(subDrop)
    $('#total').text(designVal+subDrop)
  });
});
</script>

Javascript/Jquery - 计算值并显示在 div 内

Javascript/Jquery - Calculate values and show inside a div

html

javascript

jquery

calculator