Ich habe mehrere Formular-Eingabefelder erstellt, die ein verstecktes Popup-Fenster enthalten, wenn Sie auf das Eingabefeld klicken.Umschalten mehrerer Element-Klassen mit jquery
Wie es funktioniert:
Wenn der Benutzer klicken Sie auf Eingabefeld ein die Klasse is-displayed
wird die div Eltern protect-field-container
hinzugefügt. Wenn der Benutzer auf Eingabefeld zwei klickt, wird die Klasse is-displayed
aus Element eins entfernt und zu Element zwei hinzugefügt.
Ich kann nicht scheinen, dass diese Funktion so funktioniert, wie ich es will. Unten ist ein Ausschnitt meines Codes.
JQuery:
$('.popUp-block').on("click", function(){
var $popUp = $(this).closest('.protect-field-container')
if ($popUp.hasClass('is-displayed')) {
$popUp.toggleClass('is-displayed');
} else {
$popUp.addClass('is-displayed');
}
});
HTML:
<div class="field-container">
<div class="protect-field-container two-cols col-md-4">
<article class="protect-field planner-form">
<label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
<input type="text" class="characters popUp-block">
<i class="valid-checked fa fa-check-circle"></i>
<i class="invalid-checked fa fa-times-circle"></i>
</article>
<div class="protect-popup">
<h3>Permanent Total and Partial Disability</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a href="#">More information</a>
<span>€ 100,000 - € 50,000</span>
</div>
</div>
</div>