Question

我有一些基于select选项的计算器，2个输入。在文本字段中更改范围或输入数据时，可以动态获取结果。我需要添加一些div＆＃34;按钮＆＃34;固定尺寸。选择选项然后感觉输入时效果很好。但是当我选择选择选项然后单击div（60x90或100x150）按钮时，输入会获得新值，但结果不会更新。哪里有问题？我认为在$（＆＃39;＃form＆＃39;）。（＆＃39;输入更改＆＃39;，＆＃39;选择，输入＆＃39;，功能（）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以像下面那样申请.trigger("change")，然后它会自动更新值

$('input#heightPlus, input#height').val('60').trigger("change");

$(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() {
    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').trigger("change");
  }
  if ($($this).text() == "100x150") {
    $('input#heightPlus, input#height').val('100');
    $('input#widthPlus, input#width').val('150').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>

Answer 2

您只需在功能结束时添加$('#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>

动态更新计算器输入结果

2 个答案: