Ich möchte CSS auf eine Schaltfläche ändern. Auf den ersten Klick und auf den zweiten. Ich habe das aber es funktioniert nicht. Niemals .clic-two hinzufügenErkennen zweiten Klick auf die Schaltfläche
Antwort
Eine andere Möglichkeit ist die Verwendung der allgemeinen Klasse als Selektor. Da das DOM dynamisch ist, müssten Sie die CSS-Klasse verwenden, die sich nach einer Benutzerinteraktion nicht ändert.
$(".prev-next-links, .prev-next-links a").click(function() {
if ($(this).hasClass("no-clic")) {
$(this).removeClass('no-clic');
$(this).addClass('clic-one');
} else if ($(this).hasClass("clic-one")) {
$(this).removeClass('clic-one');
$(this).addClass('clic-two');
}
});
.prev-next-links {
font-weight: bold;
}
.no-clic {
background-color: gray;
}
.clic-one {
background-color: aqua;
}
.clic-two {
background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="prev-next-links no-clic">First
</li>
<li class="prev-next-links"><a class="no-clic" href="#">Second</a>
</li>
</ul>
Sie entfernen/fügen die Klasse hinzu, was bedeutet, dass die Eigenschaft im DOM dynamisch ist. Und für die dynamischen Elemente, müssen Sie Ereignis Delegation Methode verwenden, um Arbeit:
$(".prev-next-links").on('click','li.no-clic',function() {
$(this).removeClass('no-clic');
$(this).addClass('clic-one');
});
$(".prev-next-links").on('click','li.click-one',function() {
$(this).removeClass('clic-one');
$(this).addClass('clic-two');
});
Weitere Infos zu event delegation.
Aber ich würde vorschlagen, dass Sie ein Flag-Variable gesetzt zu überprüfen, ob es zweites Mal angeklickt wird:
var clickedTime = 0;
$(".prev-next-links li").click(function() {
clickedTime++;
$(this).toggleClass('click-one',clickedTime % 2 == 0);
});
Geben Sie für toggleClass docs.
Das Problem liegt daran, dass Sie die .clic-one
-Klasse dynamisch zuweisen, nachdem die Seite geladen wurde, aber Sie hängen das Click-Ereignis an die .click-one
Schaltflächen beim Laden, bevor sie vorhanden sind.
Um dieses Problem zu lösen, die Sie delegierten Ereignishandler verwenden sollten:
den einzigen AufruftoggleClass()
über die Verwendung von
addClass()
/
removeClass()
beachten
$('.prev-next-links').on('click', '.no-clic', function() {
$(this).toggleClass('no-clic clic-one');
}).on('click', '.clic-one', function() {
$(this).toggleClass('clic-one clic-two');
});
auch separat.
- 1. Schaltfläche erste Aktion auf Klick und zweite Aktion auf Klick
- 2. Erster Klick auf die Schaltfläche ist langsam
- 3. Control Spinner nach Klick auf die Schaltfläche
- 4. Ein Klick auf die Schaltfläche tut nichts
- 5. jquery Klick-Filter auf die Schaltfläche Elemente
- 6. prevent arbeitet nicht auf den zweiten Klick
- 7. Tastatur über EditText auf zweiten Klick
- 8. LinkButton nicht Postback auf den zweiten Klick
- 9. wie Klasse auf zweiten Klick ausblenden
- 10. jquery - Text der Schaltfläche ändern bei Klick funktioniert nur beim zweiten Klick
- 11. Rückruf-Fehler beim zweiten Klick
- 12. Klick Zuhörer hinzufügen auf auf die Schaltfläche in Ext.window.MessageBox
- 13. Polygon beim zweiten Klick entfernen
- 14. Twitter Bootstrap: Popovers zeigt nicht auf dem ersten Klick, sondern zeigt auf zweiten Klick auf
- 15. Eingang wird nicht beim zweiten Klick angehängt
- 16. JQuery-Schaltfläche auf Klick funktioniert nicht
- 17. Schaltfläche bei Klick-Methode, die auf der Seitenaktualisierung eingegeben wurde!
- 18. Schließen von JFrame mit einem Klick auf die Schaltfläche
- 19. Swift: Unteransicht mit Animation bei Klick auf die Schaltfläche zeigen
- 20. App Absturz nach dem Klick auf die Schaltfläche
- 21. Captcha AngularJS Validierung mit Klick auf die Schaltfläche
- 22. jQuery verhindert Postback bei Klick auf die Schaltfläche
- 23. Android-Anwendung schließen nach dem Klick auf die Schaltfläche
- 24. Winkel ng-Klick-Werke aus der zweiten Klick
- 25. ein Bild größer auf Klick, und zurück zu klein auf zweiten Klick
- 26. jQuery Dropdown-Menü auf Klick mit klickbaren (auf zweiten Klick) Eltern
- 27. Datenbindung funktioniert nur beim zweiten Klick-Ereignis
- 28. Aktualisieren Sie nur die hinzugefügten JavaScript-Elemente beim zweiten Klick.
- 29. JavaFX Knopf reagierend auf zweiten Klick nicht zuerst
- 30. jQuery animate() funktioniert nur beim zweiten Klick
Fügen Sie Ihre 'html' auch und verbessern Sie Ihre Frage –
Bedarf weitere Informationen zu Frage hinzuzufügen, ist dies jede Sekunde klicken? Oder einfach nur erste und zweite? solche Dinge müssen geklärt werden. – guradio