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>
0
Jarri Rodrigux 11 Aug. 2015 im 05:16

4 Antworten

Beste Antwort

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>

1
DGS 11 Aug. 2015 im 03:16

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);
1
Anik Islam Abhi 11 Aug. 2015 im 02:19

$("#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

0
joyBlanks 11 Aug. 2015 im 02:26

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

2
Ghazgkull 11 Aug. 2015 im 20:23