jQuery同时更改所有输入数据

Question

我正在使用https://shaack.com/projekte/bootstrap-input-spinner/ ，当有人更改时我尝试更改所有输入值（通过使用输入类 .ppom-quantity）。

例如，如果第三个的值写为 5，那么其他的值也应该是 5，并且所有 + 和 - 都应该影响它们。

JSFiddle https://jsfiddle.net/8bayz3dn/

`

 $("input[type='number']").inputSpinner()

<link href="https://shaack.com/projekte/bootstrap-input-spinner/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/src/input-spinner.js"></script>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


<div class="row my-2">
    <div class="col-4 text-start">
        <label>First</label>
    </div>
    <div class="col-8">
       <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
    </div>
</div>
 
<div class="row my-2">
  <div class="col-4 text-start">
    <label>Second</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>

<div class="row my-2">
  <div class="col-4 text-start">
    <label>Third</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>

<div class="row my-2">
  <div class="col-4 text-start">
    <label>Fourth</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>


</div>

`

如果你能帮忙，我会很高兴。

Answer 1

试试这个：

$("input[type='number']").on('input', function() {
    $('.ppom-quantity').val($(this).val());
  });

Answer 2

您需要使用事件侦听器来侦听您的输入上的 change 和 input 事件。

//$("input[type='number']").inputSpinner()


$( 'input' ).on( 'change input', function() {
  
  $( 'input').val( $( this ).val() );
} );

<link href="https://shaack.com/projekte/bootstrap-input-spinner/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/src/input-spinner.js"></script>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


<div class="row my-2">
    <div class="col-4 text-start">
        <label>First</label>
    </div>
    <div class="col-8">
       <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
    </div>
</div>
 
<div class="row my-2">
  <div class="col-4 text-start">
    <label>Second</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>

<div class="row my-2">
  <div class="col-4 text-start">
    <label>Third</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>

<div class="row my-2">
  <div class="col-4 text-start">
    <label>Fourth</label>
  </div>
  <div class="col-8">
    <input type="number" inputmode="decimal" value="1" class="form-control ppom-quantity text-center">
  </div>
</div>


</div>