Question

＆＃13;

<!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并且在点击第二次之后它不加载并且给出加载失败。请帮助

Answer 1

如果我理解正确，那么我认为问题在于replace()函数，js replace()函数用第二个参数替换第一个参数。所以当你通过

获取img对象的src时

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。它可能与保留关键字冲突，请让我知道你正确完成它。如果没有，那么请随时再问我

Answer 2

这适用于我。

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

将失败的图片加载到HTML

2 个答案: