Mein DOM sieht folgendermaßen aus:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>Wenn jemand auf ein Bild klickt, möchte ich, dass sich das Bild src in <img src="imgx_off.gif"> donde x steht für die Bildnummer 1 oder 2.
Ist dies möglich oder muss ich die Bilder mit CSS ändern?
Sie können jQuery's attr() Funktion. Zum Beispiel, wenn Ihr img Tag hat eine id Attribut von "my_image", würden Sie dies tun:
<img id="my_image" src="first.jpg"/>Dann können Sie die src Ihres Bildes mit jQuery wie folgt:
$("#my_image").attr("src","second.jpg");Um dies mit einer click Ereignis, könnten Sie schreiben:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});Um das Bild zu drehen, können Sie wie folgt vorgehen:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Einer der häufigsten Fehler, die Leute machen, wenn sie die Bildquelle ändern, ist, dass sie nicht auf das Laden des Bildes warten, um danach Aktionen wie die Reifung der Bildgröße usw. durchzuführen. Sie müssen jQuery verwenden .load() Methode, um Dinge nach dem Laden des Bildes zu tun.
$('yourimageselector').attr('src', 'newsrc').load(function(){
this.width; // Note: $(this).width() will not work for in memory images
});Grund für die Bearbeitung: https://stackoverflow.com/a/670433/561545
Für weitere Informationen. Ich versuche, das src-Attribut mit der attr-Methode in jquery für das Anzeigenbild zu setzen, indem ich zum Beispiel die Syntax verwende: $("#myid").attr('src', '/images/sample.gif');
Diese Lösung ist nützlich, und es funktioniert, aber wenn Sie den Pfad ändern, ändern Sie auch den Pfad für das Bild und nicht funktionieren.
Ich habe nach einer Lösung für dieses Problem gesucht, aber nichts gefunden.
Die Lösung besteht darin, das "\" an den Anfang des Pfades zu setzen: $("#myid").attr('src', '\images/sample.gif');
Dieser Trick ist für mich sehr nützlich und ich hoffe, dass er auch für andere nützlich ist.
WENN es nicht nur jQuery oder andere ressourcenvernichtende Frameworks gibt - die jedes Mal von jedem Benutzer für einen einfachen Trick viele KB herunterladen müssen - sondern auch natives JavaScript(!):
<img src="img1_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">Dies kann allgemeiner und eleganter geschrieben werden:
<html>
<head>
<script>
function switchImg(img){
img.src = img.src.match(/_on/) ?
img.src.replace(/_on/, "_off") :
img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
<img src="img1_on.jpg" onclick="switchImg(this)">
<img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
