it-swarm.com.de

Ändern der Bildquelle mit jQuery

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, soll der Bild-Quellcode in <img src="imgx_off.gif"> geändert werden, wobei x die Bildnummer 1 oder 2 darstellt.

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

679
user67033

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

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

Dann können Sie das src Ihres Bildes mit jQuery wie folgt ändern:

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

Um dies an ein click -Ereignis anzuhängen, können Sie schreiben:

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

So drehen Sie das Bild:

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

Einer der häufigsten Fehler, den Benutzer beim Ändern der Bildquelle machen, besteht darin, nicht darauf zu warten, dass das Bild nach dem Laden geladen wird, sondern Aktionen wie das Reifen der Bildgröße usw. Sie müssen die Methode jQuery .load() verwenden, um nach dem Laden des Bildes etwas zu erledigen.

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

76
Mohsen

Für mehr Informationen. Ich versuche, das src-Attribut mit der attr-Methode in jquery für das Anzeigenimage festzulegen, indem ich die folgende Syntax verwende: $("#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 setzt das '\' am Anfang des Pfades: $("#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.

19
wphonestudio

Ich zeige Ihnen, wie Sie das Bild src so ändern, dass beim Klicken auf ein Bild alle Bilder in Ihrem HTML-Code (in Ihrer d1-ID und c1-Klasse) durchlaufen Insbesondere) ... ob Sie 2 oder mehr Bilder in Ihrem HTML 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 Aufschlüsselung

  1. Erstellen Sie eine Kopie der Links, die die Bilder enthalten (Hinweis: Sie können auch das href-Attribut der Links für zusätzliche Funktionen verwenden ... zum Beispiel Zeigen Sie 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 behandelt werden soll, wenn auf den Bildlink geklickt wird.

        $("#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 die Verwendung von ++$imgShow % $length, um das jQuery-Objekt zu durchlaufen, das die Bilder enthält. ++$imgShow % $length erhöht zuerst unseren Zähler um eins, dann ändert er diese Zahl mit der Anzahl der Bilder. Dadurch wird der resultierende Index von 0 nach length-1 weitergeschaltet. Dies sind die Indizes des Objekts $images. Dies bedeutet, dass dieser Code mit 2, 3, 5, 10 oder 100 Bildern funktioniert. Durchlaufen Sie jedes Bild nacheinander und starten Sie das erste Bild neu, wenn das letzte Bild erreicht ist.

    Zusätzlich wird .attr() verwendet, um das "src" -Attribut der Bilder abzurufen und festzulegen. Um Elemente aus dem Objekt $images auszuwählen, habe ich $images als jQuery-Kontext mit der Form $(selector, context) festgelegt. Dann benutze ich .eq(), um nur das Element mit dem spezifischen Index auszuwählen, an dem ich interessiert bin.


jsFiddle-Beispiel mit 3 Bildern


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

Und so fügen Sie die hrefs aus den Anker-Tags in die Bilder ein:
jsFiddle-Beispiel

17
Peter Ajtai

WENN es nicht nur jQuery oder andere Ressourcen-Killing-Frameworks gibt, 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 allgemein 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>
17
inco

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;
        }
    });
});
15
Zeeshan

Sie können dies mit jQuery auch 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 vorliegen.

9
FernandoEscher

Ich hatte das gleiche Problem, als ich versuchte, die Taste für erneutes Captcha aufzurufen. Nach einigem Suchen funktioniert die folgende Funktion nun in fast allen bekannten Browsern (Chrome, Firefox, IE, Edge, ...):

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.

7
Kayvan Tehrani

Ä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);
        }
    });
6
Abhijit Poojari

Sie sollten Ihrem Image-Tag das Attribut id wie folgt 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 Quelle der Bilder zu ändern:

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

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;
3
Raymond Wachaga

Ich habe heute das gleiche Wunder, das ich auf diesem Weg getan habe:

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

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');
});
1
Szél Lajos

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

Nur möglich ist die Verwendung von Javascript oder einer Javascript Bibliothek wie jQuery .

Logik-

Die Bilder befinden sich in einem div und es gibt keine class oder id mit diesem Bild.

Die Logik wählt also die Elemente in div aus, in denen sich die Bilder befinden.

Wählen Sie dann alle Bildelemente mit der 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>
0
Abrar Jahin