Wie Form standardmäßig verstecken und zeigen auf, klicken Sie

Question

Ich habe einen Kommentar Form haben, die durch ein PHP gezeigt wird, während Schleife wie

Post 1 
Comment box 1 

Post 2 
Comment box 2 

i das Kommentarfeld standardmäßig ausblenden möchten, und wenn der Benutzer klicken Sie auf Kommentar Link dann sollte die Form

hier gezeigt werden, ist das, was ich

$(document).ready(function() { 

    $("#showActionComment").hide(); 
    $("#showActionComment").click(function() { 
     $("#comForm").show(); 
    }); 
}); 

Html

versucht haben,

Aufgrund Schleife kann es 15 Post oben Code sein nicht

Answer 1

Sie erstellen Elemente in einer Schleife mit derselben ID. Bezeichner in HTML müssen eindeutig sein andernfalls ist HTML ungültig. Sie können Klassenauswahl und dort Beziehung verwenden, um zwischen Elementen

CSS .showActionComment {display: none;} zu durchqueren

PHP Script HTML zu erzeugen

php while loop starts here 

    <a href="javascript:void(0);" class="comForm">Comment</a> 
    <form action="/comment.php" class="form-horizontal showActionComment"> 
     <input type="text" name="comment"> 
    </form> 

php while loop ends here 

jQuery Script Sie müssen ein Click-Ereignis auf comForm Element nicht form abonnieren. Hier im Code-Ausschnitt habe ich .next()

verwendet Holen Sie sich die unmittelbar folgenden Geschwister jedes Elements in der Menge der übereinstimmenden Elemente.

$(document).on('click',".comForm", function(event) { 
    event.preventDefault(); 
    $(this).next(".showActionComment").show(); 
}); 

Anmerkung: Mit Event Delegation.on() delegierte-Ereignisse Ansatz, wenn Elemente dynamisch zu erzeugen.

Allgemeine Syntax

$(document).on('event','selector',callback_function) 

Answer 2

Stellen Sie die Anzeige in meinem Fall arbeiten: keine Eigenschaft für die Klasse.

.form-horizontal{ 
    display:none 
} 

Wenn Sie die Seite aktualisieren, wird das Formular nicht angezeigt.
Bei Klickereignis ändert sich Anzeige: keine bis Anzeige: Block gemäß Ihrem Klickereignis.

Answer 3

ausblenden das Formular standardmäßig über CSS

#comForm { 
display:none; 
} 

und dann einmal die Taste Show geklickt wird es

$("#showActionComment").click(function() { 
     $("#comForm").show(); 
    }); 

Answer 4

Vielleicht haben Sie damit gemeint - Notiz-IDs müssen eindeutig sein:

$(function() { 
 
    $(".showForm").on("click",function(e) { 
 
    e.preventDefault(); 
 
    $(this).next(".showActionComment").toggle(); 
 
    }); 
 
});

.showActionComment { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="enableJavaScript.html" class="showForm">Comment</a> 
 
<form action="/comment.php" class="form-horizontal showActionComment"> 
 
<input type="text" name="comment"> 
 
</form><br/> 
 
<a href="enableJavaScript.html" class="showForm">Comment</a> 
 
<form action="/comment.php" class="form-horizontal showActionComment"> 
 
<input type="text" name="comment"> 
 
</form>

Wenn Sie die Kommentare und Links mit AJAX laden, ändern

$(".showForm").on("click",function(e) { 

zu

$(document).on("click",".showForm",function(e) {