Ich habe vor kurzem mit jQuery angefangen. Und hier ein paar Code-Reviews zum besseren Verständnis. Ich bin also kein Experte, aber hier ist meine Ansicht.
Die Punkte, die mir wichtig wären, sind:
-
Ich werde
.on
statt verwenden, .click
weil es das Binden mehrerer Ereignisse für dasselbe Element ermöglicht. Nehmen wir an, Sie möchten eine Aufgabe auf dem Hover-Enent ausführen. Ersetzen Sie einfach "click"
mit "click mouseenter"
.
-
Css von jquery trennen. Verwenden Sie also klassenbezogene Methoden anstelle von
.css
. Es wird unübersichtlich und schwierig, Stile mit zu pflegen .css
.
- Vermeiden Sie globale Variablen von Annonomus-Funktionen (und Zähler / Flags, wenn möglich) mit Namen.
Für meine Lösung habe ich nun eine Funktion erstellt changeColor($elm, classes)
. Es braucht zwei Argumente. Eines ist das Element, dessen Klasse Sie ändern möchten, und ein Array, das möglicherweise Klassen enthält. Somit kann diese Funktion für ähnliche Auswirkungen auf Elemente und Klassensatz wiederverwendet werden.
Wie Sie es für eine input
Box mit ["purple yellow"]
klassifiziert tun können, habe ich sie aus der ready-Funktion heraus gesetzt (sie wird verfügbar sein, da sie in ready-Funktion aufgerufen wird), da sie die ready-Funktion sauber und lesbar macht.
Wenn Sie diesen Effekt nicht für alle Schaltflächen auf der Seite verwenden möchten, verwenden Sie die Klassenauswahl oder, wenn es sich nur um eine Schaltfläche handelt, dann die Auswahlliste id (fastes approach, keine DOM-Suche).
<html>
<head>
<title>Button Fun</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
button{
height:100px;
width:150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
<script type="text/javascript">
// function to change class
function changeColor($elm, classes) {
var className = $elm.attr('class');
var index = $.inArray(className, classes);
$elm.removeClass(className);
index++;
if (index === classes.length) {
index = 0;
}
$elm.addClass(classes[index]);
}
// equivalent to $(document).ready
$(function(){
// cache button element
var $button = $("#dynamic-button");
var classes = ["red", "green", "blue"];
// attach event with $button
$button.on("click", function (){
changeColor($(this), classes);
});
});
</script>
</head>
<body>
<button id="dynamic-button" class="blue">Press</button>
</body>
</html>
Arbeiten von changeColor.
Es braucht zwei Argumente. Eins ist elment ( $(this)=>$button
) und zweitens Attay von Klassen ( ["red", "green", "black"]
). Holen Sie sich die aktuelle Klasse des Elements (sagen wir "rot"). Suchen Sie nun die Indexnummer dieser Klasse in Klassen und entfernen Sie sie aus dem Element. Fügen Sie mithilfe der Indexnummer nur die nächste Klasse aus dem Array hinzu. Wenn die Indexnummer um eins kleiner ist als die Größe des Arrays, dann seine letzte Klasse im Array. Setzen Sie den Index auf 0 zurück.
Nachteile dieses Ansatzes
Der einzige Nachteil dieses Ansatzes besteht jedoch darin, wenn Ihre Schaltfläche über mehrere Klassen verfügt, die "irgendein rot" sagen. Dann funktioniert diese Funktion nicht sofort. Sie müssen entsprechend Ihrem Anwendungsfall einige Änderungen vornehmen. Styling kann aber auch für die ID oder das Element erfolgen. Oder Sie können nur Farbe übergeben und dann mit .css festlegen.