Wie kann ich Bildquellen in meiner Webanwendung mithilfe von jQuery dynamisch ändern?

Bildquellen mit jQuery bearbeiten

In Webanwendungen ist die dynamische Steuerung des visuellen Erscheinungsbilds von Elementen für ein ansprechendes Benutzererlebnis unerlässlich. Ein häufiges Szenario ist die Notwendigkeit, Bildquellen basierend auf Benutzerinteraktionen auszutauschen.

Stellen Sie sich ein Szenario vor, in dem eine Webseite zwei Bilder enthält:

<div>
<p>Sie möchten die Bildquelle in imgx_off ändern .gif, wobei x die Bildnummer (1 oder 2) darstellt, wenn ein Benutzer darauf klickt. Diese Funktionalität ermöglicht die visuelle Darstellung von Änderungen oder Zustandsübergängen.</p>
<h3 id="Lösung-mit-jQuerys-attr">Lösung mit jQuerys attr()</h3>
<p>jQuerys attr()-Funktion bietet eine vielseitige Möglichkeit, HTML-Attribute dynamisch zu manipulieren. In diesem Fall können Sie das src-Attribut des Bildes ändern.</p>
<p>So implementieren Sie diese Funktionalität:</p>
<ol>
<li>Weisen Sie jedem Bild eine eindeutige ID zu, z. B. img1 und img2. </li>
<li>Verwenden Sie die Funktion attr(), um das src-Attribut zu ändern, wenn das Bild vorhanden ist angeklickt.</li>
</ol>
<pre class="brush:php;toolbar:false">$('#img1').on({
    'click': function(){
        $('#img1').attr('src','img1_off.gif');
    }
});
$('#img2').on({
    'click': function(){
        $('#img2').attr('src','img2_off.gif');
    }
});

Rotation von Bildquellen

Um die Funktionalität weiter zu verbessern, können Sie eine Bildrotation implementieren. Dadurch können die Bilder nahtlos zwischen zwei vordefinierten Zuständen wechseln (z. B. von img1_on zu img2_off und umgekehrt).

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_off.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Dieses Skript prüft das aktuelle src-Attribut des angeklickten Bildes und aktualisiert es mit dem geeignete Bildquelle basierend auf dem aktuellen Stand.