JS按鈕，增量/減量在輸入字段上無法正常工作

Question

我在使網站上的javascript增大/減小按鈕正常工作時遇到問題。 當我將JS變量聲明為輸入字段的類名稱時，如果按下按鈕，它將增加/減少所有輸入字段，如下所示：

但是，當我使用輸入字段的ID時，它增加/減少了第一行，但是所有其他按鈕上的按鈕均不起作用。 我不確定我在做什么錯。 JS顯然可以正常工作，但是如何使它分別適用於每行/按鈕。

我的Laravel刀片的html：

@foreach ($pgroup->pskus as $psku)
<tr>
<td>
  <div>
  <button id="subtract" class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
  <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'  />
  <button id="add" class="add-button md-btn md-btn-success"  style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
  </div>
  </td>
  </tr>
  @endforeach

而我的JS：

@section('loadjs')
<script src="{{ jfi\asset_cb('/js/pagination.js') }}"></script>
<script src="{{ jfi\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/factory.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/jquery.min.js') }}"></script>
<script type="text/javascript">
$("#add").click(function(){
var value = $(".md-input").val();
value = +value + 1;
$(".md-input").val(value);
});

$("#subtract").click(function(){
var value = $(".md-input").val();
value = +value - 1;
$(".md-input").val(value);
});
</script>
@endsection

如您所見，我的JS代碼當前正在使用輸入字段的類，這使一個按鈕影響所有輸入字段。

我該如何糾正才能正常工作？

更新：我正在嘗試的新代碼：

HTML：

<div>
<button class="subtract" class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
<input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' />
<button class="add" class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
</div>

JS：

@section('loadjs')
<script src="{{ jfi\asset_cb('/js/pagination.js') }}"></script>
<script src="{{ jfi\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/factory.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/jquery.min.js') }}"></script>
<script type="text/javascript">
$(".add").click(function() {
  var inputField = $(this).prev('input'), /* get the input field */
      value = parseInt( inputField.val() ); /* get its value and parse it as integer */
  value += 1; /* add one */
  inputField.val(value); /* put the value back */
});

$(".subtract").click(function() {
  var inputField = $(this).next('input'),
      value = parseInt( inputField.val() );
  value -= 1;
  inputField.val(value);
});
</script>
@endsection

Answer 1

如前所述，您應該在頁面上具有唯一的ID。

因此，寧可將id="add"更改為class="id" 。

我已經更新了該函數，請參見代碼中的注釋以獲取一些說明。

 $(".add-button").click(function() { var inputField = $(this).prev('input'), /* get the input field */ value = parseInt( inputField.val() ); /* get its value and parse it as integer */ value += 1; /* add one */ inputField.val(value); /* put the value back */ }); $(".remove-button").click(function() { var inputField = $(this).next('input'), value = parseInt( inputField.val() ); value -= 1; inputField.val(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> <tr> <td> <div> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> </table> 

Answer 2

您的代碼中有一些錯誤：首先，您不能多次使用相同的ID，可以將類用於此類操作...此外，我建議您向包含div的類中添加一個類，以處理來自為了始終確保遞增/遞減的內容和位置以及腳本中的偵聽器較少

 @section('loadjs') <script src="{{ jfi\\asset_cb('/js/pagination.js') }}"></script> <script src="{{ jfi\\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script> <script src="{{ jfi\\asset_cb('/js/factory.js') }}"></script> <script src="{{ jfi\\asset_cb('/js/jquery.min.js') }}"></script> <script type="text/javascript"> $('.incrementer-class-name').each(function() { var $this = $(this); var $input = $this.find('.md-input'); $this.on('click', '.add-button', function() { var val = parseInt($input.val()); $input.val(++val); }).on('click', '.remove-button', function() { var val = parseInt($input.val()); $input.val(--val); }); }); </script> @endsection 

 @foreach ($pgroup->pskus as $psku) <tr> <td> <div class="incrementer-class-name"> <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0' /> <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> </div> </td> </tr> @endforeach