Farbe beim Klicken der Schaltfläche ändern

76817
Quelle (EN)
Aaron

Ich habe eine HTML-Schaltfläche, durch die der Benutzer die Farbe von blau nach rot und zurück ändert, wenn er auf die Schaltfläche klickt. Gibt es einen besseren Weg, dies in jQuery zu tun?

HTML / jQuery

<html>
<head>
    <title>Button Fun</title>
    <script src = 'bower_components/jquery/dist/jquery.js'></script>
    <script type="home.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript">
    clicked = true;
    $(document).ready(function(){
        $("button").click(function(){
            if(clicked){
                $(this).css('background-color', 'red');
                clicked  = false;
            } else {
                $(this).css('background-color', 'blue');
                clicked  = true;
            }   
        });
    });
    </script>
</head>
<body>

    <button>Press</button>

</body>
</html>

CSS

button{
    background-color: blue;
    height:100px;
    width:150px;
}
Antworten
5
Für den Anfang benötigen Sie keine komplette Bibliothek (es sei denn, Sie verwenden jQuery an anderer Stelle in Ihrem Projekt), Sie können nur Vanilla js verwenden. ʰᵈˑ vor 4 Jahren 0

3 Antworten auf die Frage

8
Guest

Es ist besser, CSS zum Stilisieren und zum Bearbeiten einer Klasse mit JS zu verwenden (in diesem Fall die jQuery-Bibliothek).

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Button Fun</title>
        <style>
            button {
                background-color: blue;
                height: 100px;
                width: 150px;
            }

            button.pressed {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>Press</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script>
            $(() => {
                'use strict';
                $('button').click(function() {
                    $(this).toggleClass('pressed');
                });
            });
        </script>
    </body>
</html>
[Ich habe im Chat mit anderen Leuten über Ihre vorgeschlagene Bearbeitung diskutiert.] (Http://chat.stackexchange.com/rooms/8595/conversation/clicker-talk) Wir freuen uns, wenn Sie sich uns anschließen, dies ist eine sehr gute Antwort . Malachi vor 4 Jahren 1
Dies wäre meine bevorzugte Lösung - es tut dies sauber, indem nur eine Klasse hinzugefügt / entfernt wird, im Gegensatz zur direkten Inline-Manipulation. Letzteres ist schwer zu pflegen - was ist, wenn Sie die gedrückten Tasten zukünftig orange haben möchten? Sie müssen jeden Event-Handler anstelle eines einzigen CSS-Werts ändern. Es ist auch viel schwieriger, Stylesheets außer Kraft zu setzen - vielleicht möchten Sie in einem bestimmten Fall, dass eine gedrückte Taste orange ist - dies ist nur mit CSS zu beheben, aber wenn der Style inline ist, benötigen Sie '! Important', was wiederum die Wiedergabe stoppt schön mit dem Rest von CSS, was die Wartung schwieriger macht VLAZ vor 4 Jahren 1
7
Malachi 
$("button").click(function(){
    if(clicked){
        $(this).css('background-color', 'red');
        clicked  = false;
    } else {
        $(this).css('background-color', 'blue');
        clicked  = true;
    }   
});

Du könntest es stattdessen so machen

$("button").click(function(){
    var color = clicked ? 'red' : 'blue';
    $(this).css('background-color', color);
    clicked = !clicked;
});

Wir verschieben die Farbauswahl mit einer ternären Anweisung auf eine einzige Variablenauswahl und müssen die Änderung nur einmal in das CSS des Elements schreiben. dann drehen wir den Boolean um.

Ich mag den Namen der booleschen Variablen nicht, sie beschreibt nicht genau, was sie verfolgt, basierend auf der Schreibweise des Codes sollte er benannt werden isButtonBlue.

Wenn die Schaltfläche blau ist, drehen Sie sie rot. Wenn die Schaltfläche nicht blau ist, drehen Sie sie blau.

Nachdem ich mir dies etwas länger angesehen hatte, dachte ich, dass Sie es um eine Zeile kürzer machen könnten, indem Sie eine weitere Zeile verlängern, indem Sie die ternäre Anweisung in die CSS-Änderung verschieben

$("button").click(
    $(this).css('background-color', isButtonBlue ? 'red' : 'blue');
    isButtonBlue = !isButtonBlue;
});
0
Rajesh Kumar

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:

    1. Ich werde .onstatt verwenden, .clickweil 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".
    1. Css von jquery trennen. Verwenden Sie also klassenbezogene Methoden anstelle von .css. Es wird unübersichtlich und schwierig, Stile mit zu pflegen .css.
    1. 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 inputBox 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.

Verwandte Probleme