Blue Flower

1.4
Attribute dynamisch verändern

Wir wollen in einem abschließenden Beispiel durchspielen,
wie man mit jQuery Attribute bei einem Element der Webseite dynamisch verändern
kann. Dazu stellt jQuery die flexible und nützliche Methode attr() zur Verfügung. Damit können Sie eines oder mehrere Attribute eines Elements
dynamisch verändern. Sie setzen in geschweiften Klammern ein Wertepaar als
Parameter, wobei zuerst das Attribut spezifiziert wird, dann folgen ein
Doppelpunkt und anschließend ein String mit dem neuen Wert. Alternativ können
Sie auch zwei String-Parameter angeben. Bei der Variante stehen der erste
Parameter für den Attributnamen und der zweite Parameter für den Wert (in dem
Fall können Sie aber nur ein Attribut ändern). Wollen Sie nur den Wert von
einem Attribut abfragen, geben Sie nur den Namen des Attributs als
String-Parameter an.

CHV_BOX_ID_01

icn001

Praxistipp

Wir
werden der Einfachheit halber im folgenden Beispiel nur ein Attribut ver
ändern, aber wenn Sie
gleichzeitig mehrere Attribute
ändern
wollen, brauchen Sie in den geschweiften Klammern nur durch Kommata getrennt
weitere Wertepaare notieren.

 

Für unser Beispiel wollen wir ein Bild in der Webseite
austauschen, indem wir den Wert des Attributs src
von einem <img>-Tag verändern (kap2_4.html):

Listing 1.7       Attribute mit jQuery manipulieren

  <script
type="text/javascript">

    $(document).ready(function () {


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

        $("img").attr({

          src:
"images/b1.jpg"

        });

      });


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

        $("img").attr(

          "src",
"images/b2.jpg"

        );

      });

    });

  </script>

</head>

<body>

  <h1>Ein Bild austauschen</h1>

  <button
id="toggle1">Bild 1</button><button
id="toggle2">Bild 2</button>

  <hr /><img
src="/images/b1.jpg" />

</body>

</html>

Wir ändern einmal mit der Notation in den geschweiften

Klammern den Wert und einmal mit den zwei String-Parametern. Wie oben
beschrieben wird jeweils der Wert von src ausgetauscht.