Событие Click влияет только на первый элемент jquery

Событие Click влияет только на первый элемент jquery

16.11.2019 04:44:57 Просмотров 33 Источник

Я пишу приложение, в котором пользователь выбирает, переключая кнопку переключателя, но событие click влияет только на первый элемент.

 <label class="switch">
    <input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
    <span class="slider round"></span>
</label>                                            
<label class="switch">
   <input type="checkbox" id="block-instructors" class="block-instructors"  value="J0jcK7eUvadzSNaaoG2h">
   <span class="slider round"></span>
</label>  

    $("#block-instructors").on('change', function(e){
        if ($(this).is(':checked')) {
            $(this).attr('value');
            alert($(this).val());
        }
        else {
            $(this).attr('value', 'false');
            alert($(this).val());
        }
    });
У вопроса есть решение - Посмотреть?

Ответы - Событие Click влияет только на первый элемент jquery / Click event affects only the first element jquery

Является ответом!
Kalimah Apps

16.11.2019 04:47:46

Вы не можете иметь один и тот же идентификатор для двух элементов на одной странице. Используйте это вместо этого

$(".block-instructors").on('change', function(e) {
  if ($(this).is(':checked')) {
    $(this).attr('value');
    alert($(this).val());
  } else {
    $(this).attr('value', 'false');
    alert($(this).val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
    <input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
    <span class="slider round"></span>
</label>                                            
<label class="switch">
   <input type="checkbox" id="block-instructors" class="block-instructors"  value="J0jcK7eUvadzSNaaoG2h">
   <span class="slider round"></span>
</label> 

Rouhollah Mazarei

16.11.2019 04:48:50

Использовать класс вместо идентификатора:

$(".block-instructors").on('change', function(e){
Aqib Mukhtar

16.11.2019 04:50:53

Здесь вы определили несколько тегов с одинаковым идентификатором. Ваша функция jQuery начинает поиск идентификатора "block-instructors" и возвращает вам, где он находит первый в DOM. Вы должны преобразовать блок-инструкторы из идентификатора класса, а затем получить к нему доступ

Prachi Sawarkar

16.11.2019 05:00:19

Вы должны иметь уникальный идентификатор для отдельного элемента или тега. Когда вы нажимаете на него, он ссылается на последний, так как код выполняется строка за строкой. Попробуйте этот код вместо этого.


$("#block-instructors1").on('change', function(e,value){
    if ($(this).is(':checked')) {
        $(this).attr('value');
        alert($(this).val());
    }
    else {
        $(this).attr('value', 'false');
        alert($(this).val());
    }
});
$("#block-instructors2").on('change', function(e,value){
    if ($(this).is(':checked')) {
        $(this).attr('value');
        alert($(this).val());
    }
    else {
        $(this).attr('value', 'false');
        alert($(this).val());
    }
});
Sarthak Khandelwal

16.11.2019 05:27:35

Чтобы выбрать первый элемент или любой из первых n-й элемент в jquery можно легко сделать с помощью: nth-child() селектор в jquery

Например для 2-го li в ul:

$("ul li:nth-child(2)")

Ссылку можно найти здесь

Закрыть X