Ok, also versuche ich, nur meine Header (alle 3 Header) dazu zu bringen, die Farbe Rot zu bekommen, wenn mit der Funktion changeStuff auf die Schaltfläche "Rote Überschriften" geklickt wird, aber sie scheint nicht richtig zu funktionieren. Ist dies die richtige Funktion, die ich verwenden sollte?
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script>
"jquery-2.1.4.js"
</script>
<script>
function changeStuff() {
$("h").addClass("redElements");
}
$("theRedButton").bind("click", changeStuff);
</script>
</body>
4 Antworten
Ihr Code weist Syntaxfehler auf.
Ändern Sie es zu
function changeStuff() {
$("h1,h2,h3").addClass("redElements");
}
$("#theRedButton").bind("click", changeStuff);
https://jsfiddle.net/2oj1s9mg/
Ebenfalls
<script>
"jquery-2.1.4.js"
</script>
Sollte sein
<script src="jquery-2.1.4.js"></script>
Versuchen Sie es so
$("h1,h2,h3").addClass("redElements");
Es gibt keinen Elementnamen h
Verwenden Sie für die ID-Abfrage #.
Ohne # behandelte jquery den bereitgestellten Selektor als Element
Fügen Sie so hinzu
$("#theRedButton").bind("click",changeStuff);
$("#theRedButton").bind("click",changeStuff);
Hat ein # für die Auswahl nach ID hinzugefügt
Und das $('h') sollte $('h1,h2,h3,h4,h5'); // sein oder was auch immer Sie diese Klasse auf die Seite bringen möchten
Ich kann auch die Abfrage sehen, von der ich hoffe, dass Sie versucht haben, einen Pseudocode zu testen, sonst müssen Sie jQuery einschließen
Verwenden Sie Folgendes, um die Klasse allen Header-Elementen hinzuzufügen:
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
$("#theRedButton").on("click", changeStuff);
Bearbeiten : Hier finden Sie den vollständigen HTML-Inhalt, den Sie benötigen. Außerdem wird gezeigt, wie Sie jQuery einbinden und in den dokumentenbereiten Rückruf einbinden sollten:
<head>
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#theRedButton").on("click", changeStuff);
});
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
</script>
</body>
Und hier ist ein funktionierender Stift, der ihn in Aktion zeigt: http://codepen.io/Ghazgkull/pen/rVRRbK