Wie ändere ich das Hintergrundbild mit jQuery?
Es sollte das in meinem HTML bereitgestellte Bild ändern. Die Funktion sollte dynamisch sein, um jedes Bild beim Aufruf zu ändern.
Antworten:
0 für die Antwort № 1Nehmen wir an, Sie haben den folgenden Code ...
<div id="container">
<img src="/images/some location">
</div>Sie können das Bild mit dem folgenden Abfragecode ändern ...
function change_image(){
$("#container").html("<img src="/images/some other image location">");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Lass mich wissen ob es funktioniert.
0 für die Antwort № 2
Da Sie sagten, dass Sie neu bei jQuery sind, habe ich dem Kommentieren des Codes besondere Aufmerksamkeit gewidmet. Sie haben nicht wirklich angegeben, wie das Hintergrundbild eingestellt werden soll, daher habe ich ein Klickereignis für Miniaturansichten verwendet.
Der Code:
// before doing our magic with jQuery,
// we must wait for the dom to be ready to be manipulated
$(document).ready(function () {
// listen for a click on any img inside the .images
$(".images img").on("click", function () {
// inside the event handlers callback, THIS refers to the img that was clicked
// here we save the src property of the clicked img to a variable
var imgSrc = $(this).prop("src");
changeBackgroundImg(imgSrc);
});
});
function changeBackgroundImg(imgSrc) {
// we can set any css property to an element with jQuerys .css()
$("body").css("background-image", "url(" + imgSrc + ")");
}
Hier ist ein Demo.
Links zur Dokumentation zum Code: