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

我已更新了该功能，请参阅代码中的注释以获得一些解释。

＆＃13;

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

＆＃13;

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

＆＃13;

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

JS按钮，增量/减量无法正确处理输入字段

2 个答案: