Jquery: Действие для каждого изменения

Question

Продвигаясь от: https://stackoverflow.com/questions/16649933/jquery-on-form-change-with-bootstrap-sliders/16650319?noredirect=1

настоящее время я использую ниже, чтобы захватить идентификатор слайдера и изменить содержание #log. Проблема в том, что это только захват первого слайдера. Мне нужно, чтобы это выполнялось при изменении любого слайдера.

Я пробовал использовать ID цены на всех своих слайдерах, однако это не сработает.

$('#price').each(function(index,value){ 
    $(this).bind('slide', function(){ 
     $("#log").prepend('<p>Changed</p>') 
    }); 
}); 

Answer 1

Причина, по которой это не работает, заключается в том, что JavaScript соответствует спецификации HTML, а в спецификации HTML указано, что ID attributes must be unique.

Вам не разрешено иметь два элемента с id="price". Из-за этого JavaScript остановит поиск после того, как он найдет первое совпадение. Ваш цикл .each() будет работать только один раз, независимо от количества #price элементов, присутствующих после первого.

Чтобы решить эту проблему, используйте вместо этого классы. Например:

<div class="price">...</div> 
<div class="price">...</div> 
<div class="price">...</div> 

$('.price').each(function(index,value) { ... }); 

Вам также нужно изменить #log элементы, чтобы использовать классы, тоже.

Answer 2

$('#price') is id, страница содержит один дубликат идентификатора. вам нужно использовать класс