Как я могу увеличивать и уменьшать значение с уникальным идентификатором?
У меня есть этот цикл, идентификатор уникален. Когда я пытаюсь увеличить, он работает только для одного поля ввода. Как я могу увеличивать и уменьшать, используя уникальный идентификатор?
@forelse($allproduct as $key=>$data)
<tr>
<td data-label = "@lang('Date')">
<div class = "quantity col-md-8" style = "display:flex; ">
<input type = "text" value = "" class = "form-control req amnt display-inline" id = "qtyid[{{$data->product_id}}]" min = "0">
<div class = "quantity-nav">
<div class = "quantity-button quantity-up qty" onclick = "incrementValue()">+</div>
<div class = "quantity-button quantity-down qty" onclick = "decrementValue()">-</div>
</div>
</div>
</td>
</tr>
@endforelse
Javascript
function incrementValue()
{
var value = parseInt(document.getElementById("qtyid").value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('qtyid').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('qtyid').value, 10);
value = isNaN(value) ? 0 : value;
value--;
if (value == -1) {
value = 0;
}
document.getElementById('qtyid').value = value;
}
Я знаю. Я спросил, как сделать идентификатор уникальным по функции?
Какой точно не работает с этим кодом? Вы столкнулись с проблемой PHP или Javascript?
Когда я пытаюсь увеличить, он работает только для одного поля ввода. Как я могу увеличивать и уменьшать, используя уникальный идентификатор
«Как я могу увеличивать и уменьшать, используя уникальный идентификатор» - почему бы не начать с использования уникального идентификатора? Кроме того, если это не связано с PHP или самим Laravel, поделитесь сгенерированной разметкой вместе с вашими попытками решить проблему.
Я уже делаю идентификатор уникальным. А также используйте код laravel. Я даже не знаю, о чем ты говоришь.
Тогда, пожалуйста, поделитесь более подробной информацией о вашей проблеме. Если ваши элементы имеют идентификатор, такой как qtyid[4], ваш код JS должен отражать это. Доступ к значениям через ID qtyid явно невозможен
Бро, это был мой вопрос. У меня был уникальный идентификатор в html, но я не мог использовать уникальный идентификатор в JS. Поэтому я задал вопрос, как это сделать. Но нвм сейчас все хорошо. Я получил ответ. Спасибо за информацию.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я предлагаю вам использовать подход, который не требует идентификаторов.
function incrementValue(e)
{
// use the quantity field's DOM position relative to the button that was clicked
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value++;
qty.value = value;
}
function decrementValue(e)
{
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value--;
if (value == -1) {
value = 0;
}
qty.value = value;
}@forelse($allproduct as $key=>$data)
<tr>
<td data-label = "@lang('Date')">
<div class = "quantity col-md-8" style = "display:flex; ">
<input type = "text" value = "" class = "form-control req amnt display-inline" min = "0">
<div class = "quantity-nav">
<div class = "quantity-button quantity-up qty" onclick = "incrementValue(event)">+</div>
<div class = "quantity-button quantity-down qty" onclick = "decrementValue(event)">-</div>
</div>
</div>
</td>
</tr>
@endforelseОн показывает Uncaught ReferenceError: e не определен
Упс, в html должно проходить event, а не e — попробуйте сейчас.
ID должны быть уникальными. Все поля ввода в цикле имеют одинаковый идентификатор
qtyid. Это не работает.