Javascript 在 JQuery 中设置 Src 属性的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4390627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's The Correct Way To Set Src Attribute In JQuery?
提问by Shawn
Suppose I have the following HTML:
假设我有以下 HTML：
<img id="foo" src="bar1.jpg"/>
I would like to switch the srcto bar2.jpg
我想切换src到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!
谢谢！
回答by Sarfraz
When you do this:
当你这样做时：
$("#foo").attr("src", "bar2.jpg");
The previous srcis replaced.
之前的src被替换了。
So you don't need:
所以你不需要：
$("#foo").removeAttr("src");
You can confirm it out here
你可以在这里确认
回答by meder omuraliev
Just do .attr('src', 'foo')because you're assigning a srcregardless. Only remove the attribute if you don't need it entirely.
只是.attr('src', 'foo')因为你正在分配一个src不管。仅当您不需要它时才删除该属性。
回答by jon_darkstar
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.
$.attr 用于获取现有属性并更改它（取决于是否有一个或两个参数）。您的情况正是他的第二个功能的目的，并且属性 'src' 并不特殊。
回答by sheeba
<!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>
