So ändern Sie Bilder in JQuery

Bei der Front-End-Entwicklung ist es häufig erforderlich, die Bilder auf der Seite je nach Status oder Ereignis dynamisch zu ändern. Zu diesem Zeitpunkt muss jQuery verwendet werden, um den Bildwechsel abzuschließen.

Im Folgenden werden zwei häufig verwendete jQuery-Bildwechselmethoden vorgestellt.

1. Bilder durch Hinzufügen von CSS-Klassen wechseln

Diese Methode dient zum Wechseln von Bildern durch Hinzufügen oder Entfernen von CSS-Klassen zu Bildern.

HTML-Code:

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript-Code:

$(document).ready(function(){
  $("#changeImage").click(function(){
    $("#myImage").toggleClass("image2");
    if($("#myImage").hasClass("image2")){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

CSS-Code:

.image2 {
  content: url(image2.jpg);
}

Wir definieren ein Bild und eine Schaltfläche im HTML-Code. Wenn auf die Schaltfläche geklickt wird, wird der JavaScript-Code durch Hinzufügen oder Entfernen des CSS ausgelöst auf dem Bild, um die Quelladresse des Bildes zu ändern. Gleichzeitig haben wir in der CSS-Datei die Klasse .image2 definiert, damit die Quelladresse des Bildes dynamisch geändert werden kann. .image2 类，使得图片的源地址可以被动态更改。

二、通过 jQuery 的 attr() 方法切换图片

这种方法是直接通过 jQuery 的 attr() 方法来更改图片的源地址。

HTML 代码：

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript 代码：

$(document).ready(function(){
  $("#changeImage").click(function(){
    var imgSrc = $("#myImage").attr("src");
    if(imgSrc == "image1.jpg"){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

我们在 HTML 代码中同样定义了一个图片和一个按钮，点击按钮后会触发 JavaScript 代码，通过 attr()

2. Wechseln Sie Bilder über die Methode attr() von jQuery

Diese Methode dient dazu, die Quelladresse des Bildes direkt über die Methode attr() von jQuery zu ändern.

HTML-Code: 🎜rrreee🎜JavaScript-Code: 🎜rrreee🎜Wir definieren auch ein Bild und eine Schaltfläche im HTML-Code. Wenn auf die Schaltfläche geklickt wird, wird der JavaScript-Code ausgelöst, der über das attr geändert werden kann () Methode Die Quelladresse des Bildes, um eine Bildumschaltung zu erreichen. 🎜🎜Zusammenfassung🎜🎜Die oben genannten sind zwei häufig verwendete jQuery-Bildwechselmethoden. Das dynamische Wechseln von Bildern kann durch Hinzufügen oder Entfernen von CSS-Klassen und direktes Ändern der Bildquelladresse erreicht werden. Wir können je nach Bedarf verschiedene Methoden wählen, um den Effekt der Bildumschaltung zu erzielen. 🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie Bilder in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!