0
私のサイトのjavacriptの増減ボタンを操作するのに問題があります。私は私の入力フィールドのクラス名として私のJS変数を宣言するとき、私はボタンを押した場合、それは増加/このような入力フィールドの全てを低下させる：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：あなたが見ることができるように、私のJSコードは、現在1を作っている私の入力フィールドのクラスを使用している
@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
ボタンはすべての入力フィールドに影響します。
これを正しく動作させるにはどうすればよいですか？
UPDATE：新しいコード私がしようとしています：
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
ページに複数の「id」を持つことはできません。一意である必要があります。むしろクラスを使用してください！ – LinkinTED
すべてのID（ボタンとフィールド）を接尾辞quantity_idとリンクすると、すべてのIDが異なり、quantity_idを使用して更新するフィールドを決めることができます – Ko2r
JSは現在クラスを使用していますが、追加/最初の行では、ページのすべての入力フィールドに加算または減算されますか？また、ボタンの最初の行が動作する唯一のボタンです –