Verwenden Sie jQuery, um die Farbe beim Klicken auf die Schaltfläche zu ändern

Dieser Artikel soll Entwicklern helfen, das Problem zu lösen, dass die Farbe beim Klicken auf Schaltflächen bei Verwendung von jQuery nicht geändert werden kann. Dies kann in der Regel dadurch verursacht werden, dass die jQuery-Bibliothek nicht korrekt eingebunden wird. Dieser Artikel bietet eine detaillierte Lösung, einschließlich der korrekten Einführung von jQuery, sowie einen ausführbaren Beispielcode, der zeigt, wie jQuery zum Abhören von Schaltflächenklickereignissen und zum Ändern der Hintergrundfarbe verwendet wird.

Stellen Sie sicher, dass jQuery korrekt eingeführt wird

Stellen Sie vor der Verwendung von jQuery sicher, dass die jQuery-Bibliothek korrekt in Ihre HTML-Datei eingebunden ist. Dies ist die häufigste Problemquelle. Es kann auf folgende Weise eingeführt werden:

1. Verwenden Sie einen CDN-Link: Dies ist der einfachste und schnellste Weg. Fügen Sie den folgenden Code am Ende des -Tags oder -Tags Ihrer HTML-Datei hinzu:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Hinweis: Es wird empfohlen, einen stabilen CDN-Link zu verwenden und dessen Verfügbarkeit regelmäßig zu überprüfen.

2. Laden Sie die jQuery-Datei herunter und importieren Sie sie lokal: Laden Sie die neueste Version der jQuery-Datei von der offiziellen jQuery-Website ( //m.sbmmt.com/link/80cb49db30e21273c9acaf03212060f8 ) herunter und legen Sie sie in Ihrem Projektverzeichnis ab. Verweisen Sie dann mithilfe des <script>-Tags in der HTML-Datei auf die Datei. Wenn Sie beispielsweise die Datei jquery-3.7.0.min.js im js-Verzeichnis ablegen, können Sie den folgenden Code verwenden:</script>

 <script src="js/jquery-3.7.0.min.js"></script>

HINWEIS: Stellen Sie sicher, dass der Dateipfad korrekt ist.

Überprüfen Sie, ob jQuery erfolgreich eingeführt wurde:

Nach der Einführung von jQuery können Sie jQuery oder $ in die Konsole der Entwicklertools des Browsers eingeben (normalerweise durch Drücken der Taste F12 geöffnet). Wenn ein jQuery-Objekt zurückgegeben wird, wurde jQuery erfolgreich eingeführt. Wenn der Fehler „Uncaught ReferenceError: $ ist nicht definiert“ auftritt, bedeutet dies, dass jQuery nicht korrekt eingeführt wurde.

Verwenden Sie jQuery, um Klickereignisse abzuhören und Farben zu ändern

Sobald Sie bestätigt haben, dass jQuery erfolgreich eingeführt wurde, können Sie jQuery verwenden, um das Klickereignis der Schaltfläche abzuhören und ihre Hintergrundfarbe zu ändern. Hier ist ein Beispielcode:

 

<kopf>
<title>Änderung der Schaltflächenfarbe</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<stil>
  .vote {
    Polsterung: 10px 20px;
    Schriftgröße: 16px;
    Cursor: Zeiger;
  }


<k>

<div class="rating">
  <button class="vote">1</button>
  <button class="vote">2</button>
  <button class="vote">3</button>
  <button class="vote">4</button>
  <button class="vote">5</button>
</div>

<skript>
$(document).ready(function(){
  $(".vote").on("click", function(){
    $(this).css("backgroundColor", "hsl(216, 12%, 54%)");
  });
});



</skript></k></stil></kopf>

Code-Erklärung:

• $(document).ready(function(){ ... }); : Dieser Code stellt sicher, dass der jQuery-Code ausgeführt wird, nachdem das gesamte HTML-Dokument geladen wurde.
• $(".vote").on("click", function(){ ... }); : Dieser Code wählt alle Elemente mit Klassenvotum aus (in diesem Fall alle Schaltflächen) und bindet eine Funktion an ihr Klickereignis.
• $(this).css("backgroundColor", "hsl(216, 12%, 54%)"); : Wenn auf die Schaltfläche geklickt wird, setzt dieser Code die Hintergrundfarbe der aktuell angeklickten Schaltfläche auf hsl(216, 12 %, 54 %). $(this) bezieht sich auf das aktuell angeklickte Schaltflächenelement.

CSS-Stil (optional):

Um die Schaltfläche schöner aussehen zu lassen, können Sie dem

Zusammenfassen

Durch diesen Artikel sollten Sie in der Lage sein, das Problem zu lösen, dass bei Verwendung von jQuery die Farbe beim Klicken auf eine Schaltfläche nicht geändert werden kann. Der Schlüssel besteht darin, sicherzustellen, dass Sie die jQuery-Bibliothek korrekt einbinden und den richtigen jQuery-Code verwenden, um auf Klickereignisse zu warten und Stile zu ändern. Denken Sie daran, dass das Überprüfen von Fehlermeldungen und das Debuggen mit den Entwicklertools Ihres Browsers Ihnen dabei helfen können, das Problem schnell zu finden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um die Farbe beim Klicken auf die Schaltfläche zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!