<!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>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
i = i + 1;
var Source = document.getElementById('P').src;
document.getElementById('P').src = Source.replace(i - 1, i);
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="Images/Para/P-1.jpg"></div>
<div><img id="Q" src="Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>
&#13;
实际上我想要一个可以加载图片的创建html页面。但是这段代码返回加载失败的p-3.jpg。我无法理解为什么会发生这种情况。首先它在p-2.jpg之后加载P-1.jpg并且在点击第二次之后它不加载并且给出加载失败。请帮助
答案 0 :(得分:0)
如果我理解正确,那么我认为问题在于replace()
函数,js replace()
函数用第二个参数替换第一个参数。所以当你通过
var Source = document.getElementById('P').src;
它取整个src的对象,根据这里你有图像路径也正确吗?
这是Images/Para/P-1.jpg
,所以当你用替换函数替换src时,在下一个它只保留i = i + 1;
的值,
我想你可以尝试这样的事情
Source.replace("Images/Para/P-"+i - 1+".jpg", "Images/Para/P-"+i+".jpg");
向我推荐一些我可以说的内容请遵循变量声明的对流,在这里使用var Source
在JavaScript中有保留关键字Source
。它可能与保留关键字冲突,
请让我知道你正确完成它。如果没有,那么请随时再问我
答案 1 :(得分:0)
这适用于我。
<!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>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
var previous = i;
var previousP = "P-" + previous.toString();
i = i + 1;
var Source = document.getElementById('P').src;
var newP = "P-" + i.toString();
var res = Source.replace(previousP, newP);
document.getElementById('P').src = res;
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="/Images/Para/P-1.jpg"></div>
<div><img id="Q" src="/Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="/Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>