Есть ли способ узнать, какой номер элемента вызывает событие?
хорошо, поэтому я пытаюсь выяснить, как я могу получить точное количество набора динамически добавляемых входных данных в DOM, чтобы позже заполнить их данными, которые поступают из базы данных в модальном режиме, поэтому логика заключается в том, что когда пользователь выбирает данные из модального окна, выбранные данные будут заполнять ввод, где находится пользователь.
Вот мой код..
var numeroDeInput = 0;
// crea row con los inputs de materia prima $('#materiaPrima').click(function(e) { numeroDeInput = $('.material').length; var tableRow = `
<div class = "rowCreated d-flex gap-2 my-2">
<input type = "text" placeholder = "Material" class = "material form-control buscarMaterial" name = "material[]" \>
<input type = "number" placeholder = "Medida 1" readonly class = " medida_uno form-control" name = "medida_uno[]" \>
<input type = "number" placeholder = "Medida 2" readonly class = " medida_dos form-control" name = "medida_dos[]" \>
<input type = "number" placeholder = "Largo" id = "largo" class = "form-control calcular" name = "largo[]" \>
<input type = "number" placeholder = "Ancho" id = "ancho" class = "form-control calcular" name = "ancho[]" \>
<input type = "number" placeholder = "Alto" id = "alto" class = "form-control calcular" name = "alto[]" \>
<input type = "number" placeholder = "Precio" readonly class = "precio form-control" name = "precio[]" \>
<input type = "number" placeholder = "Subtotal" step = ".01" readonly class = "subtotal form-control" name = "subtotal[]" \>
<button type = "button" class = "btn btn-sm btn-danger py-0 removeRow"><i class = "bi bi-x fs-3"></i></button>
</div>` $('.tableBody').append(tableRow); console.info(numeroDeInput); });enter code here
@MarkusZeller, не могли бы вы быть более конкретным, потому что я являюсь console.info целью события и не могу найти ничего подходящего для точного таргетинга ввода, вызвавшего событие, я имею в виду, что я пытаюсь получить порядковый номер ввода, вызвавшего событие событие
Вы получаете сам элемент ввода. Если вам нужен его индекс, самый простой способ — добавить к нему другой атрибут, например data-index = "0".
но ввод добавляется динамически, и все они имеют один и тот же класс, мне пришлось бы добавить счетчик, чтобы увеличить значение индекса, и я уже пробовал это, я пытаюсь получить доступ к его естественному индексу, поэтому, когда я удалить один ввод, индекс не меняется в других вводах
Каждый <input> имеет уникальное name свойство. Если вам действительно нужно найти индекс элемента, вы можете использовать это: index = [...myElement.parentElement.children].indexOf(myElement)
Добро пожаловать в Stack Overflow. Пожалуйста, предоставьте минимальный воспроизводимый пример.
Ответы 1
Вы можете добавить прослушиватель событий в каждое поле ввода числа. При запуске просто перебирайте все поля ввода чисел и подсчитывайте индекс до тех пор, пока он не совпадет.
Для демонстрации я добавил информационный блок, который отображает информацию о щелчке по числовым полям.
Я использовал ванильный Javascript, потому что больше не использую jQuery.
const numberSelector = 'input[type = "number"]';
const info = document.getElementById('info');
document.querySelectorAll(numberSelector).forEach(
number => number.addEventListener('click', input => {
let index = 0;
const inputs = document.querySelectorAll(numberSelector);
while (index < inputs.length) {
if (inputs[index] === input.target) {
info.innerText = `Index: ${index} Placeholder: ${input.target.placeholder}`;
break;
}
index++;
}
})
);<div class = "rowCreated d-flex gap-2 my-2">
<input type = "text" placeholder = "Material" class = "material form-control buscarMaterial" name = "material[]" \>
<input type = "number" placeholder = "Medida 1" readonly class = " medida_uno form-control" name = "medida_uno[]" \>
<input type = "number" placeholder = "Medida 2" readonly class = " medida_dos form-control" name = "medida_dos[]" \>
<input type = "number" placeholder = "Largo" id = "largo" class = "form-control calcular" name = "largo[]" \>
<input type = "number" placeholder = "Ancho" id = "ancho" class = "form-control calcular" name = "ancho[]" \>
<input type = "number" placeholder = "Alto" id = "alto" class = "form-control calcular" name = "alto[]" \>
<input type = "number" placeholder = "Precio" readonly class = "precio form-control" name = "precio[]" \>
<input type = "number" placeholder = "Subtotal" step = ".01" readonly class = "subtotal form-control" name = "subtotal[]" \>
<button type = "button" class = "btn btn-sm btn-danger py-0 removeRow"><i class = "bi bi-x fs-3"></i></button>
<div id = "info"></div>
</div>
e.target— это элемент, из которого было инициировано событие. Вы можете прочитать все атрибуты из него. Напримерe.target.getAttribute('placeholder'). Вам также нужно поместить обработчик событий на элементы, которые вы хотите наблюдать.