CODEWITHSUNDEEP
javascriptjqueryhtml
Shawn
Shawn

Reputation: 7365

What's The Correct Way To Set Src Attribute In JQuery?

Suppose I have the following HTML:

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

I would like to switch the src to bar2.jpg

Can I just do this?

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

Or do I have to do this?

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

Thanks!

Upvotes: 43

Views: 83722

Answers (5)

Mojtaba Nava
Mojtaba Nava

Reputation: 878

Even for mediaelement player have:

  $("#player5").attr("poster", "/images/poster/Azadi.jpg");

Upvotes: 0

sheeba
sheeba

Reputation: 1

<!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>

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382909

When you do this:

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

The previous src is replaced.

So you don't need:

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

You can confirm it out here

Upvotes: 69

jon_darkstar
jon_darkstar

Reputation: 16788

The first wey is just fine, no reason to remove it first.

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

$.attr serves both to get the existing attribute and to change it (depending on whether theres one or two arguments). Your situation is exactly what he second functionality is intended for, and the attribute 'src' is not special.

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

Upvotes: 6

meder omuraliev
meder omuraliev

Reputation: 186762

Just do .attr('src', 'foo') because you're assigning a src regardless. Only remove the attribute if you don't need it entirely.

Upvotes: 6

Related Questions