Mijn DOM ziet er als volgt uit:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Als iemand op een afbeelding klikt, wil ik dat de afbeelding src verandert in <img src="imgx_off.gif">waarbij xhet afbeeldingsnummer vertegenwoordigt 1 of 2.
Is dit mogelijk of moet ik CSS gebruiken om de afbeeldingen te wijzigen?
Antwoord 1, autoriteit 100%
Je kunt de attr()-functie van jQuery gebruiken. Als uw img-tag bijvoorbeeld een id-kenmerk van ‘my_image’ heeft, doet u dit:
<img id="my_image" src="first.jpg"/>
Vervolgens kun je de srcvan je afbeelding met jQuery als volgt wijzigen:
$("#my_image").attr("src","second.jpg");
Als u dit aan een click-gebeurtenis wilt toevoegen, kunt u schrijven:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Als u de afbeelding wilt draaien, kunt u dit doen:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Antwoord 2, autoriteit 5%
Een van de veelvoorkomende fouten die mensen maken bij het wijzigen van de afbeeldingsbron, is niet wachten op het laden van afbeeldingen om daarna acties uit te voeren, zoals het volwassen worden van de afbeeldingsgrootte, enz.
U moet de jQuery .load()-methode gebruiken om dingen te doen nadat de afbeelding is geladen.
$('yourimageselector').attr('src', 'newsrc').load(function(){
this.width; // Note: $(this).width() will not work for in memory images
});
Reden voor bewerken: https://stackoverflow.com/a/670433/561545
Antwoord 3
In het geval dat u de afbeelding meerdere keren bijwerkt en deze wordt CACHEDen
niet wordt bijgewerkt, voeg een willekeurige tekenreeks toe aan het einde:
// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
Antwoord 4
Voor meer informatie. Ik probeer het src-kenmerk met de attr-methode in jQuery voor advertentieafbeelding in te stellen met behulp van de syntaxis bijvoorbeeld: $("#myid").attr('src', '/images/sample.gif');
Deze oplossing is handig en het werkt, maar als het pad wordt gewijzigd, verandert ook het pad voor de afbeelding en werkt niet.
Ik heb gezocht naar een oplossing voor dit probleem, maar niets gevonden.
De oplossing is om de ‘\’ aan het begin van het pad te plaatsen:
$("#myid").attr('src', '\images/sample.gif');
Deze truc is erg handig voor mij en ik hoop dat het ook nuttig is voor anderen.
Antwoord 5
ALS er niet alleen jQuery of andere frameworks voor het doden van bronnen zijn – veel kb om elke keer door elke gebruiker te downloaden voor een simpele truc – maar ook native 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';">
Dit kan algemeen en elegant worden geschreven:
<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>
6
Ik hoop dat dit kan werken
<img id="dummyimage" src="https://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;
}
});
});
7
U moet het id-kenmerk toevoegen aan uw afbeeldingstag, zoals dit:
<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>
dan kun je deze code gebruiken om de bron van afbeeldingen te wijzigen:
$(document).ready(function () {
$("#img1").attr({ "src": "logo-ex-7.png" });
$("#img2").attr({ "src": "logo-ex-8.png" });
});
Antwoord 8
Je kunt dit ook op deze manier met jQuery doen:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
U kunt een voorwaarde hebben als er meerdere statussen zijn voor de afbeeldingsbron.
Antwoord 9
Ik had hetzelfde probleem toen ik de re captcha-knop probeerde aan te roepen.
Na wat zoeken werkt de onderstaande functie nu prima in bijna alle bekende browsers (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’ wordt gebruikt om een nieuwe captcha-afbeelding weer te geven en kan in uw geval worden genegeerd. Het belangrijkste punt is het genereren van een nieuwe URL die FF en IE dwingt om de afbeelding opnieuw te renderen.
Antwoord 10
Wijzig de afbeeldingsbron met 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);
}
});
11
Ik heb vandaag hetzelfde wonder, dat deed ik op deze manier:
//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');
});
12
Dit is een gegarandeerde manier om het gedaan te krijgen in vanille (of gewoon pure) JavaScript:
var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
13
Ik heb hier een codepen gemaakt met precies deze functionaliteit. Ik zal u ook een uitsplitsing van de code geven.
$(function() {
//Listen for a click on the girl button
$('#girl-btn').click(function() {
// When the girl button has been clicked, change the source of the #square image to be the girl PNG
$('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");
});
//Listen for a click on the plane button
$('#plane-btn').click(function() {
// When the plane button has been clicked, change the source of the #square image to be the plane PNG
$('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
});
//Listen for a click on the fruit button
$('#fruits-btn').click(function() {
// When the fruits button has been clicked, change the source of the #square image to be the fruits PNG
$('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" id="square" />
<div>
<button id="girl-btn">Girl</button>
<button id="plane-btn">Plane</button>
<button id="fruits-btn">Fruits</button>
<a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a>
</div>Antwoord 14
Gewoon een toevoeging, om het nog kleiner te maken:
$('#imgId').click(function(){
$(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Antwoord 15
Kort maar precies
$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );
Antwoord 16
Er is geen manier om de afbeeldingsbron te wijzigen met CSS.
De enige mogelijke manier is het gebruik van Javascriptof een andere Javascript-bibliotheek zoals jQuery.
Logica-
De afbeeldingen bevinden zich in een div en er zijn geen classof idbij die afbeelding.
Dus logica zal zijn om de elementen binnen de divte selecteren waar de afbeeldingen zich bevinden.
Selecteer vervolgens alle afbeeldingselementen met lus en verander de afbeeldingssrc met Javascript/ jQuery.
Voorbeeldcode met demo-uitgang-
$(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>