jquery - 动态更新计算器输入结果

Question

我有一些基于选择选项、2 个输入的计算器。当您更改范围或在文本字段中输入数据时，您会动态获得结果。我需要添加一些固定大小的 div“按钮”。当您选择选择选项然后感受输入时，它的效果非常好。但是，当我选择选择选项然后单击 div(60x90 或 100x150)按钮时，输入会获得新值，但结果不会更新。哪里有问题？我认为在 $('#form').on('输入更改', '选择,输入', function()

$(document).ready(function(){
	$(document).on('input', '#height', function(event) {
    $(this).next().val($(this).val());
});
$(document).on('input', '#heightPlus', function(event) {
    $(this).prev().val($(this).val());
});
$(document).on('input', '#width', function(event) {
    $(this).next().val($(this).val());
});
$(document).on('input', '#widthPlus', function(event) {
    $(this).prev().val($(this).val());
});
});

$(document).ready(function(){

   $('#form').on('input change', 'select,input', function() {
        console.log(this.type)
        if(this.type == 'range') $(this).next().text(this.value) 
        var o = $(this).closest('.roword').find('select,input'),
            v = o.eq(0).val(),
            w = o.eq(1).val(),
            h = o.eq(3).val(),
            r = o.last().val('');
            if(v) { 
                v = v * w * h;
                r.val(v.toFixed())
            }
    })
});

function changeValue($this)
    {
        if($($this).text() == "60x90") {
        $('input#heightPlus, input#height').val('60');
        $('input#widthPlus, input#width').val('90');
		}
		if($($this).text() == "100x150") {
        $('input#heightPlus, input#height').val('100');
        $('input#widthPlus, input#width').val('150');
		}
    }

.standart {
  border: 2px solid #000;
  display: inline-block;
  margin: 20px;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
<div class = "roword">
<div>
<select  name="type[]">
     <option value="">Choose type</option>
     <option value="1.1">Type1</option>
     <option value="1.4">Type2</option>
</select>
</div>
<div class="form-col-2">
     <input form="send" type="range"  min="40" max="200" id="height" name="height[]" value="40">
		<input form="send" type="text" maxlength="3" min="40" max="200" id="heightPlus" name="heightPlus[]" value="40" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');">
</div>
<div class="form-col-3">
    <input form="send" type="range" min="40" max="300" id="width" name="width[]" value="40"> 
		<input form="send" type="text" maxlength="3" min="40" max="300" id="widthPlus" name="widthPlus[]" value="40" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"> 
</div>
<div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
     <input class="myPrice" form="send" type="text" name="result[]" readonly>
</div>
</div>
</div>

		<div class="col-md-2 col-sm-2 col-xs-5 post standart" onclick="changeValue(this)">60x90</div>
		<div class="col-md-2 col-sm-2 col-xs-5 post standart" onclick="changeValue(this)">100x150</div>

Answer 1

您只需在函数末尾添加 $('#form input:first').trigger('change'); 即可，而不是添加 trigger在每个 if 中，都会触发并更新值:

$(document).ready(function() {
  $(document).on('input', '#height', function(event) {
    $(this).next().val($(this).val());
  });
  $(document).on('input', '#heightPlus', function(event) {
    $(this).prev().val($(this).val());
  });
  $(document).on('input', '#width', function(event) {
    $(this).next().val($(this).val());
  });
  $(document).on('input', '#widthPlus', function(event) {
    $(this).prev().val($(this).val());
  });
});

$(document).ready(function() {

  $('#form').on('input change', 'select,input', function() {
    console.log(this.type)
    if (this.type == 'range') $(this).next().text(this.value)
    var o = $(this).closest('.roword').find('select,input'),
      v = o.eq(0).val(),
      w = o.eq(1).val(),
      h = o.eq(3).val(),
      r = o.last().val('');
    if (v) {
      v = v * w * h;
      r.val(v.toFixed())
    }
  })
});

function changeValue(element) {
  if ($(element).text() == "60x90") {
    $('input#heightPlus, input#height').val('60');
    $('input#widthPlus, input#width').val('90');
  }
  if ($(element).text() == "100x150") {
    $('input#heightPlus, input#height').val('100');
    $('input#widthPlus, input#width').val('150');
  }
  $('#form input:first').trigger('change');
}

.standart {
  border: 2px solid #000;
  display: inline-block;
  margin: 20px;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
  <div class="roword">
    <div>
      <select name="type[]">
     <option value="">Choose type</option>
     <option value="1.1">Type1</option>
     <option value="1.4">Type2</option>
</select>
    </div>
    <div class="form-col-2">
      <input form="send" type="range" min="40" max="200" id="height" name="height[]" value="40">
      <input form="send" type="text" maxlength="3" min="40" max="200" id="heightPlus" name="heightPlus[]" value="40" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');">
    </div>
    <div class="form-col-3">
      <input form="send" type="range" min="40" max="300" id="width" name="width[]" value="40">
      <input form="send" type="text" maxlength="3" min="40" max="300" id="widthPlus" name="widthPlus[]" value="40" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');">
    </div>
    <div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
      <input class="myPrice" form="send" type="text" name="result[]" readonly>
    </div>
  </div>
</div>

<div class="col-md-2 col-sm-2 col-xs-5 post standart" onclick="changeValue(this)">60x90</div>
<div class="col-md-2 col-sm-2 col-xs-5 post standart" onclick="changeValue(this)">100x150</div>