Was fehlt in diesem Code?

Ich versuche, den grünen Kreis abwechselnd zwischen rot und grün zu machen, wenn er angeklickt wird. Der Code sieht gut aus für mich, aber es funktioniert nicht, also muss etwas falsch sein. Welchen Anfängerfehler mache ich?Was fehlt in diesem Code?

$("#greenCircle").click(function() { 
 
    console.log($("#greenCircle").css("background-color")); 
 
    if ($("#greenCircle").css("background-color") == "red") { 
 
    $("#greenCircle").css("background-color", "green"); 
 
    } else { 
 
    $("#greenCircle").css("background-color", "red"); 
 
    } 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

Ich werde absolut verrückt! Ich mache nur eine einfache jQuery-Animation und wieder funktioniert es einfach nicht. Alles sieht korrekt aus. Ich bin sogar soweit gegangen, Texteditoren zu wechseln und nichts. Hier ist der Code für die Animation.

<!DOCTYPE html> 
<html> 

<head> 
    <title>JQuery</title> 

    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="jQuery Practice.css"> 

</head> 
<body> 
    hello 

    <div id="circle"></div> 

    <script type="text/javascript"> 

     $("#circle").click(function(){ 

     $("#circle").animate({Width:"400px"}, 2000); 

     }); 

    </script> 

</body>

#circle{ 
width: 150px; 
height: 150px; 
background-color: green; 
border-radius: 50%; 
}

Quelle

2017-11-10 Reese

Welches Verhalten erhalten Sie? –

IIRC, verwenden Sie CSS, um den Wert eines Feldes, das eine Farbe ist, den Wert im Format rgb(), nicht 'rot' oder 'grün' zurückgeben. Es wäre einfacher, dies mit einer Klasse am wahrscheinlichsten zu tun – Taplar

Falls Sie nur- die mit diesem Ansatz gehen berechnete Werte für die Farbe werden in RGBa (Rot, Blau, Grün, Alpha - für Deckkraft) und nicht in Farbnamen (wie rot, blau, orange, transparent usw.) oder als Hexadezimalwerte dargestellt.

$("#greenCircle").click(function() { 
 
    if ($("#greenCircle").css("background-color") == 'rgb(255, 0, 0)') { 
 
    $("#greenCircle").css("background-color", "green"); 
 
    } else { 
 
    $("#greenCircle").css("background-color", "red"); 
 
    } 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

Quelle

2017-11-10 21:51:29

Da die CSS die Farbe im RGB-Format, die Verwendung einer Klasse zurückgeben, die Sie/aus ein- wird dies viel einfacher.

$("#greenCircle").click(function() { 
 
    $("#greenCircle").toggleClass('red'); 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
#greenCircle.red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

Quelle

2017-11-10 21:50:19 Taplar

$("#greenCircle").css("background-color") kehrt die geparsten Farbe wie "rgb(0, 128, 0)", die "red" oder "green" nicht gleich ist.

Es wäre einfacher, wenn Sie eine Klasse verwenden, um die Farbe festzulegen, dann können Sie toggleClass() verwenden.

$("#circle").click(function() { 
 
    $(this).toggleClass("greenCircle redCircle"); 
 
});

#circle { 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 
.greenCircle { 
 
    background-color: green; 
 
} 
 
.redCircle { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="circle" class="greenCircle"></div>

Quelle

2017-11-10 21:50:34 Barmar

Die CSS ("background-color") Methode nicht den tatsächlichen Wert in Ihrem Stil-Attribute zurück, sondern ein rgb() Wert. Versuchen console.log, um zu sehen, wie sich der Wert ändert nach der Änderung:

console.log($("#greenCircle").css("background-color"));

Könnte ich eine einfachere Alternative Ansatz vorschlagen:

<style> 
    #circle { 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
    } 
    #circle.green{ 
    background-color: green; 
    } 
    #circle.red{ 
    background-color: red; 
    } 
</style> 
<script> 
    $("#circle").click(function(){ 
    $(this).toggleClass('red', 'green'); 
    }); 
</script> 
<div id="circle" class="green"></div>

Quelle

2017-11-10 21:51:01 Nicolas

So ist der Code viel sauberer.

$("#greenCircle").click(function() { 
 
    $(this).toggleClass("red"); 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
#greenCircle.red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

Quelle

2017-11-10 21:52:34 Nick

Danke. Ich machte ein Udemy-Tutorial und der Lehrer nahm diesen Ansatz. Es schien für ihn richtig zu funktionieren. Es hat mich nur wirklich gestört. Ich werde nur eine der Alternativen suchen, wenn ich sie benutzen muss. – Reese

einfach diesen Code hinzufügen und die IDs Klassen ändern

$(".red").click(function() { 
    $(this).toggleClass('greenCircle red'); 
});

.greenCircle { 
    background-color: green; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
} 
.red { 
    background-color: #f00; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class="red"></div>

Quelle

2017-11-10 21:55:27 samehanwar

Was fehlt in diesem Code?

Antwort

Verwandte Themen