Ändern der Bildquelle mit jQuery

764

Mein DOM sieht so 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 dahin ändert, <img src="imgx_off.gif">wo es xdie Bildnummer 1 oder 2 darstellt.

Ist das möglich oder muss ich CSS verwenden, um die Bilder zu ändern?

javascript jquery image user67033
quelle
Wenn Sie etwas mit jQuery möchten, können Sie sich das jQuery Cycle Plugin ansehen, Demo scrollRight (Beispiel unten rechts)
TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
manish nautiyal
9
Sie sollten Jonstjohns Antwort wirklich akzeptieren :) Die Anzahl der Upvotes sowohl zu der Frage als auch zur Antwort zeigt an, dass viele Leute darauf gestoßen sind. Es würde die Frage verbessern, eine akzeptierte Antwort zu haben.
Xcelled
4
Bis zum Datum, dh 19th July, 2016 15:39 PMFrage Upvotes Count 369 und @jonstjohn Answer Upvotes Count 931 . Aber so ein Pech, @OP hat sich danach nicht angemeldet Feb 17 '09 at 2:57. :(Und @jonstjohn Antwort bleibt unmarkiert .
Nana Partykar
@Xcelled, das einzige Problem ist, dass Jonstjohns Antwort die Frage nicht beantwortet. Es ist ein kleiner Punkt, aber einer, der es wert ist, gemacht zu werden. Schauen Sie sich die Antwort von inco an, da dies die einzige ist, die die Frage tatsächlich richtig beantwortet.
David Newcomb

Antworten:

1687

Sie können die attr () - Funktion von jQuery verwenden. Wenn Ihr imgTag beispielsweise das idAttribut 'my_image' hat, würden Sie Folgendes tun:

<img id="my_image" src="first.jpg"/>

Dann können srcSie das Bild mit jQuery folgendermaßen ändern :

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

Um dies an ein clickEreignis anzuhängen , können Sie schreiben:

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

Um das Bild zu drehen, können Sie Folgendes tun:

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

Einer der häufigsten Fehler, den Menschen beim Ändern der Bildquelle machen, besteht darin, nicht darauf zu warten, dass das Bild nachträglich ausgeführt wird, um Aktionen wie das Reifen der Bildgröße usw. auszuführen. Sie müssen die jQuery- .load()Methode verwenden, um nach dem Laden des Bildes Dinge auszuführen.

$('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

Mohsen
quelle
Ja. Dies hat endlich den Trick getan. .destroy () geht nicht weit genug. Das Nuking des gesamten HTML-Codes und der erneuten Init-Funktion funktioniert tatsächlich, wenn Bilder in verschiedenen Größen und dergleichen ausgetauscht werden.
Matt J.
Beachten Sie, dass das Laden nicht zuverlässig ausgelöst wird, insbesondere wenn sich das Bild im Cache befindet. Siehe die jQuery-Dokumentation.
Twilite
19

Für mehr Informationen. Ich versuche, das src-Attribut mit der attr-Methode in jquery für Anzeigenbilder mithilfe der folgenden Syntax festzulegen:$("#myid").attr('src', '/images/sample.gif');

Diese Lösung ist nützlich und funktioniert, aber wenn Sie den Pfad ändern, ändern Sie auch den Pfad für das Bild und funktionieren nicht.

Ich habe nach einer Lösung für dieses Problem gesucht, aber nichts gefunden.

Die Lösung besteht darin, das '\' am Anfang des Pfades zu setzen: $("#myid").attr('src', '\images/sample.gif');

Dieser Trick ist sehr nützlich für mich und ich hoffe, er ist nützlich für andere.

wphonestudio
quelle
18

WENN es nicht nur jQuery oder andere Frameworks zum Töten von Ressourcen gibt - viele KB müssen jedes Mal von jedem Benutzer nur für einen einfachen Trick heruntergeladen werden -, 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>
inco
quelle
Es überrascht mich immer wieder, wie viele Leute eine Frage nicht lesen und die gewünschte Antwort geben können. Mir (und Ihnen) schien es offensichtlich, dass die Frage nach einer generischen Lösung suchte, weshalb das OP zwei Beispiele gab. Und doch schienen alle anderen es nicht nur völlig zu vermissen, sondern eine Antwort zu geben, die die Frage nicht einmal beantwortete. :(
David Newcomb
17

Ich werde Ihnen zeigen, wie Sie das Bild srcso ändern , dass es beim Klicken auf ein Bild durch alle Bilder in Ihrem HTML-Code (in Ihrer d1ID und c1Klasse) rotiert ... unabhängig davon, ob Sie zwei oder mehr Bilder in Ihrem HTML-Code haben .

Ich zeige Ihnen auch, wie Sie die Seite bereinigen, nachdem das Dokument fertig ist, sodass zunächst nur ein Bild angezeigt wird.

Der vollständige Code

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

Die Panne

  1. Erstellen Sie eine Kopie der Links, die die Bilder enthalten (Hinweis: Sie können auch das href-Attribut der Links verwenden, um zusätzliche Funktionen zu erhalten. Zeigen Sie beispielsweise den Arbeitslink unter jedem Bild an ):

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. Überprüfen Sie, wie viele Bilder im HTML-Code enthalten waren, und erstellen Sie eine Variable, um zu verfolgen, welches Bild angezeigt wird:

    var $length = $images.length;
var $imgShow = 0;

  3. Ändern Sie den HTML-Code des Dokuments so, dass nur das erste Bild angezeigt wird. Löschen Sie alle anderen Bilder.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. Binden Sie eine Funktion, die beim Klicken auf den Bildlink behandelt werden soll.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    Das Herzstück des obigen Codes ist das ++$imgShow % $lengthDurchlaufen des jQuery-Objekts, das die Bilder enthält. ++$imgShow % $lengthErhöht zuerst unseren Zähler um eins, dann ändert er diese Zahl mit der Anzahl der Bilder. Dadurch bleibt der resultierende Index von 0bis zu length-1den Indizes des $imagesObjekts erhalten. Dies bedeutet, dass dieser Code mit 2, 3, 5, 10 oder 100 Bildern funktioniert ... und jedes Bild der Reihe nach durchläuft und beim ersten Bild neu startet, wenn das letzte Bild erreicht ist.

    Wird außerdem .attr()verwendet, um das Attribut "src" der Bilder abzurufen und festzulegen. Um Elemente aus dem $imagesObjekt auszuwählen , habe ich mithilfe des Formulars $imagesden jQuery-Kontext festgelegt$(selector, context) . Dann .eq()wähle ich nur das Element mit dem spezifischen Index aus, an dem ich interessiert bin.

jsFiddle-Beispiel mit 3 Bildern


Sie können das srcs auch in einem Array speichern .
jsFiddle-Beispiel mit 3 Bildern

Und so fügen Sie die hrefs aus den Ankertags um die Bilder ein:
jsFiddle-Beispiel

Peter Ajtai
quelle
17

Hoffe das kann funktionieren

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});
Zeeshan
quelle
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Derek Brown
Danke Derek, ich werde dieses Ding vom nächsten Mal an im Kopf behalten
Zeeshan
14

Sie sollten Ihrem Bild-Tag das folgende ID-Attribut hinzufügen: 

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

Dann können Sie diesen Code verwenden, um die Bildquelle zu ändern:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
Herr Bitmap
quelle
9

Sie können dies auch mit jQuery folgendermaßen tun:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Sie können eine Bedingung haben, wenn für die Bildquelle mehrere Status vorhanden sind.

FernandoEscher
quelle
5
Diese Syntax ist nicht richtig. Die Funktion jquery attr () benötigt 1 oder 2 Parameter. Die erste ist eine Zeichenfolge mit dem HTML-Attributnamen, die zweite ist der Wert für das Attribut, das Sie festlegen möchten.
Thiago Silva
7

Ich hatte das gleiche Problem beim Versuch, die Re-Captcha-Taste aufzurufen. Nach einiger Suche funktioniert die folgende Funktion nun in fast allen bekannten Browsern (Chrome, Firefox, IE, Edge, ...) einwandfrei:

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' wird zum Rendern eines neuen Captcha-Bildes verwendet und kann in Ihrem Fall ignoriert werden. Der wichtigste Punkt ist das Generieren einer neuen URL, die FF und IE zwingt, das Bild erneut zu rendern.

Kayvan Tehrani
quelle
7

Ändern Sie die Bildquelle mit jQuery click()

Element:

    <img class="letstalk btn"  src="images/chatbuble.png" />

Code:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });
Abhijit Poojari
quelle
7

Wenn Sie das Bild mehrmals aktualisieren und es zwischengespeichert wird und nicht aktualisiert wird, fügen Sie am Ende eine zufällige Zeichenfolge hinzu:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
kintsukuroi
quelle
1
Zumindest für mich ist es sehr wichtig, die zufällige Zeichenfolge am Ende hinzuzufügen! Panzer!
Marcelo Sader
3

Ich habe heute das gleiche Wunder, das ich auf diese Weise getan habe:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
Anyone_ph
quelle
3

Dies ist eine garantierte Möglichkeit, dies in Vanilla (oder einfach Pure) JavaScript zu erledigen:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Raymond Wachaga
quelle
1

Nur eine Ergänzung, um es noch winziger zu machen: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Szél Lajos
quelle
-1

Es gibt keine Möglichkeit, die Bildquelle mit CSS zu ändern.

Die einzige Möglichkeit ist die Verwendung von Javascript oder einer Javascript- Bibliothek wie jQuery .

Logik-

Die Bilder befinden sich in einem Div und es gibt keine classoder idmit diesem Bild.

Die Logik besteht also darin, die Elemente auszuwählen, in divdenen sich die Bilder befinden.

Wählen Sie dann alle Bildelemente mit Schleife aus und ändern Sie die Bildquelle mit Javascript / jQuery .

Beispielcode mit Demo-Ausgabe-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>
Erweitern Sie das Snippet

Abrar Jahin
quelle