2017-08-18 62 views
-2

裝載失敗的圖像轉換成HTML

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

其實我想創建的HTML頁面可以加載圖像。但是這段代碼返回加載失敗的p-3.jpg。我不明白爲什麼會發生這種情況。首先在p-2.jpg之後加載P-1.jpg,點擊後第二次不加載並給出加載失敗。請幫助

回答

0

如果我理解正確,那麼我認爲問題在這裏與你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。它可能與保留關鍵字 衝突,請讓我知道你做到了正確。如果不是,那麼請隨時再次詢問我

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>