Селектор JQuery с динамическим идентификатором с использованием $ {}

Question

Я пытаюсь получить метку для описания поля ввода. У меня есть что-то вроде этого (этот код в <c:foreach/>)

<label for="some_input-${someCounter.index}"> 
    The value in the associated input is: ${ $('#some_input-'+${someCounter.index}).val() } 
</label> 
<input id="some_input-${comeCounter.index}"/> 

У меня возникают проблемы, пытаясь получить значение из поля ввода с помощью JQuery. Тот факт, что идентификатор для ввода задается с помощью .index, который изменяется в зависимости от итерации цикла, создает проблемы. У меня будет несколько входов, каждый со своей собственной меткой. В конце концов эти ярлыки будут скрыты на 508. Это основная причина, по которой мне нужно получить значение от ввода.

Редактировать разъяснения: Я хотел бы использовать селектор JQuery, чтобы получить значение из поля ввода и отображение этого значения в метке, который соединен с ней с помощью динамического ID.

Спасибо.

Answer 1

Чтобы получить значение из поля ввода, вы можете сделать следующее:

1. Добавьте класс полей ввода
2. Возьмите этот класс и сделать с входом, как вы, пожалуйста

Обновлено JSP:

<label for="some_input-${someCounter.index}"> 
    The value in the associated input is: ${ $('#some_input-'+${someCounter.index}).val() } 
</label> 
<input id="some_input-${comeCounter.index}" class="some-class" /> 

JavaScript Пример:

$(".some-class").each(function() { 
    var $input = $(this); 

    // Now you can get the value of the input and do with it as you please. 
    console.log($input.val()); 
}); 

---

Update после осветления:

Нет, вы не можете сделать все это в JSP, как вы зависите от входа пользователя; вам необходимо привязать к событию изменения, чтобы обновить этот элемент. Вот один из способов сделать это:

JSP:

<label for="some_input-${someCounter.index}"> 
    The value in the associated input is: <output></output> 
</label> 
<input id="some_input-${comeCounter.index}" class="some-class" /> 

JavaScript:

$(".some-class").on("change propertychange click keyup input paste", function() { 
    var $input = $(this), 
     id = $input.prop("id"), 
     $target = $('label[for="' + id + '"]').find("output") // Get the target element 

    // Update the target element 
    $target.text($input.val()); 
}); 

Это должно сделать трюк. Вы можете использовать любой элемент в качестве цели, он не должен быть элементом output.

Примечание: Я обновил прослушиватель, чтобы выбрать несколько событий, чтобы сразу обнаружить любые изменения в поле ввода (вместо того, чтобы ждать, пока вход не выйдет из фокуса).