Quelle est la manière correcte de définir l'attribut Src dans JQuery?

Supposons que j'ai le HTML suivant:

<img id="foo" src="bar1.jpg"/> 

Je voudrais passer le src à bar2.jpg

Puis-je faire cela?

 $("#foo").attr("src", "bar2.jpg"); 

Ou dois-je faire cela?

 $("#foo").removeAttr("src"); $("#foo").attr("src", "bar2.jpg"); 

Merci!

Lorsque vous faites ceci:

 $("#foo").attr("src", "bar2.jpg"); 

Le src précédent est remplacé.

Donc vous n'avez pas besoin de:

 $("#foo").removeAttr("src"); 

Vous pouvez le confirmer ici

Il suffit de faire .attr('src', 'foo') parce que vous assignez un src indépendamment. Supprimez uniquement l'attribut si vous n'en avez pas besoin entièrement.

Le premier wey est très bien, aucune raison de l'enlever d'abord.

 $("#foo").attr("src", "bar2.jpg"); 

$ .attr sert à la fois à obtenir l'attribut existant et à le modifier (selon qu'il existe un ou deux arguments). Votre situation est exactement à quoi la seconde fonctionnalité est destinée et l'attribut «src» n'est pas spécial.

http://api.jquery.com/attr/

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .main{ position:relative; } .second{ position:absolute; top:20px; left:720px; } .third{ position:absolute; top:290px; left:720px; } .fourth{ position:absolute; top:100px; left:1030px; } .firstarrow{ position:absolute; top:20px; left:1100px; } .secondarrow{ position:absolute; top:20px; left:1030px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $(".firstarrow").on('click', function() { var pos1 = $('.first img').attr('src'); var pos2 = $('.second img').attr('src'); var pos3 = $('.third img').attr('src'); var pos4 = $('.fourth img').attr('src'); $('.third img').attr('src', pos1); $('.fourth img').attr('src', pos3); $('.second img').attr('src', pos4); $('.first img').attr('src', pos2); }); $(".secondarrow").on('click', function() { var pos1 = $('.first img').attr('src'); var pos2 = $('.second img').attr('src'); var pos3 = $('.third img').attr('src'); var pos4 = $('.fourth img').attr('src'); $('.third img').attr('src', pos4); $('.fourth img').attr('src', pos2); $('.second img').attr('src', pos1); $('.first img').attr('src', pos3); }); }); </script> </head> <body> <div class="main"> <div class="first"> <img src="img1.jpg" alt="" width="700" height="511" /> </div> <div class="second"> <img src="img2.jpg" alt="" width="300" height="250" /> </div> <div class="third"> <img src="img3.jpg" alt="" width="300" height="250" /> </div> <div class="fourth"> <img src="img4.jpg" align="" width="300" height="400" /> </div> <a href="#"><div class="firstarrow"><img src="ar1.jpg" width="48" height="48" /></div></a> <a href="#"><div class="secondarrow"><img src="ar2.jpg" width="48" height="48" /></div></a> </div> </body> </html>