jQuery .Click() Funktion nicht mehr als einmal feuern

Also habe ich eine HTML-Seite geschrieben, dass wenn ein Name angeklickt wird, dieser Name ausgeblendet wird. Der Code sieht so etwas wie diesejQuery .Click() Funktion nicht mehr als einmal feuern

<!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>

Jedes Mal, wenn ich es laufen kann ich nur einen Namen klicken ... Ich mag wäre in der Lage sein, jeden Namen zu klicken, so dass sie alle verschwinden ... Alle Vorschläge??

Quelle

2016-05-23 Peter Ledet

IDs müssen auf der Seite eindeutig sein. Sie können nicht mehr als ein Element mit derselben ID haben. – OJay

Für ein bisschen mehr Informationen, lesen Sie diesen Artikel: https://css-tricks.com/the-difference-between-id-and-class/ – mrcheshire

Sie verwenden das html id Attribut falsch. Wenn Sie mehrere Einträge haben, müssen Sie ein class Attribut verwenden, keine ID. $("#names") greift nur das erste ausgewählte Element und wendet den Ereignis-Listener darauf an.

wollen, dass es zu einer Klasse konvertieren, so dass alle Elemente, die die Zuhörer

$(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>

Quelle

2016-05-23 22:54:02 PhilVarg

angewendet werden, Sie müssen für die Elemente eindeutige ID.

Wann immer Sie einen generischen Code schreiben, der auf viele Elemente wirken muss Verwenden Sie die Klasse, um das Leben einfacher zu machen.

Beispiel Schnipsel

<!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>

Grund für das aktuelle Verhalten: wann immer Sie $('#name') die JQuery verwenden auswählen, wird nur das erste Element mit dieser ID von oben von der DOM-Parsing .. daher Sie hatten das Ereignis nur an das erste Element gebunden. Ändern Sie es in die Klasse, die zur Auswahl aller Elemente mit der angegebenen Klasse führt.

Quelle

2016-05-23 22:55:35

Sie können keine doppelte ID auf einer einzelnen Seite verwenden. Es ist nicht gültig. Verwenden Sie stattdessen die Klasse.

<!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>

Quelle

2016-05-23 23:43:21

jQuery .Click() Funktion nicht mehr als einmal feuern

Antwort

Verwandte Themen