Wie kann ich Bildquellen mit jQuery per Klick dynamisch ändern?

Bildquellen mit jQuery ändern

Ihr Ziel ist es, Bildquellen innerhalb der folgenden DOM-Struktur dynamisch zu ändern:

<div>

Wenn Sie auf jedes Bild klicken, möchten Sie dessen Quelle in „imgx_off.gif“ ändern, wobei „x“ einem von beiden entspricht „1“ oder „2“.

Lösung: Nutzung der attr()-Funktion von jQuery

Ja, es ist machbar, dies ohne CSS zu erreichen. Mit der attr()-Methode von jQuery können Sie DOM-Elementattribute, einschließlich Bildquellen-URLs, ändern.

Wenn Ihr Bild-Tag beispielsweise das ID-Attribut „my_image“ enthält, reicht der folgende Code aus:

<img>

$('#my_image').attr("src", "second.jpg");

So hängen Sie diese Aktion an ein Klickereignis an:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Bild Drehung

Wenn Sie die Bilder drehen möchten, verwenden Sie diesen Code:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Bildquellen mit jQuery per Klick dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!