在 JQuery 中设置 Src 属性的正确方法是什么？答案

【问题标题】：What's The Correct Way To Set Src Attribute In JQuery?在 JQuery 中设置 Src 属性的正确方法是什么？
【发布时间】：2020-08-27 15:57:51
【问题描述】：

假设我有以下 HTML：

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

我想将src 切换为bar2.jpg

我可以这样做吗？

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

或者我必须这样做吗？

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

谢谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

当你这样做时：

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

替换之前的src。

所以你不需要：

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

You can confirm it out here

【讨论】：

【解决方案2】：

第一个wey就好了，没理由先去掉。

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

$.attr 用于获取现有属性和更改它（取决于是否有一个或两个参数）。您的情况正是他的第二个功能的用途，并且属性“src”并不特殊。

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

【讨论】：

【解决方案3】：

只需执行.attr('src', 'foo')，因为无论如何您都在分配src。仅在您完全不需要该属性时才删除它。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

即使mediaelement玩家也有：

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

【讨论】：