jQuery .Click() Функция не срабатывает более одного раза

Итак, я написал HTML-страницу, в которой при щелчке по имени это имя исчезает. код выглядит примерно такjQuery .Click() Функция не срабатывает более одного раза

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#names").click(function(){ 
 
     $(this).fadeOut(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p id = "names">John Doe</p> 
 
<p id = "names">Jane Doe</p> 
 

 
</body> 
 
</html>

Каждый раз, когда я запускаю его я могу только нажать одно имя ... Я хотел бы иметь возможность нажать каждое имя, так что все они исчезают ... Любые предложения ??

источник

2016-05-23 Peter Ledet

Идентификаторы должны быть уникальными на этой странице. У вас не может быть более одного элемента с одним и тем же идентификатором. – OJay

Для получения дополнительной информации ознакомьтесь с этой записью: https://css-tricks.com/the-difference-between-id-and-class/ – mrcheshire

Вы неправильно используете атрибут html id. если у вас несколько записей, вам нужно использовать атрибут class, а не идентификатор. $("#names") получит только первый выбранный элемент и применит к нему прослушиватель событий.

вы хотите, чтобы преобразовать его в классе, так что все элементы применяются слушателю

$(document).ready(function() { 
 
    $(".names").click(function() { 
 
    $(this).fadeOut(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="names">John Doe</p> 
 
<p class="names">Jane Doe</p>

источник

2016-05-23 22:54:02 PhilVarg

Вы должны иметь уникальный идентификатор для элементов.

Когда вы пишете общий код, который должен действовать на многих элементах , используйте класс, чтобы сделать жизнь проще.

Образец сниппет

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $(".names").click(function(){ 
 
     $(this).fadeOut(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p class = "names">John Doe</p> 
 
<p class = "names">Jane Doe</p> 
 

 
</body> 
 
</html>

Причина для текущего поведения: когда-либо использовать $('#name') Jquery будет выбрать только первый элемент с таким идентификатором разборе из верхней части DOM .. поэтому у вас было событие, связанное только с первым элементом. Измените его, чтобы использовать класс, который приведет к выбору всех элементов с указанным классом.

источник

2016-05-23 22:55:35

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $(".names").click(function(){ 
 
     $(this).fadeOut(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p class = "names">John Doe</p> 
 
<p class = "names">Jane Doe</p> 
 

 
</body> 
 
</html>

источник

2016-05-23 23:43:21

jQuery .Click() Функция не срабатывает более одного раза

ответ

Смежные вопросы