2015-09-05 82 views
-1

我正在製作一張桌子的網站。每個單元應該有它自己的背景圖像。我選擇將這些圖像放在一個數組中。我做了一個功能,創建一個與作爲背景的照片和作爲文本的照片。我的代碼是在:顯示陣列中的背景照片

var meme = [ 
 
'memes/0.jpg', 
 
'memes/1.jpg', 
 
'memes/2.jpg', 
 
'memes/3.jpg', 
 
'memes/4.jpg', 
 
'memes/5.jpg', 
 
'memes/6.jpg', 
 
'memes/7.jpg', 
 
'memes/8.jpg', 
 
'memes/9.jpg', 
 
'memes/10.jpg', 
 
'memes/11.jpg']; 
 

 
var author = [ 
 
'avelan', 
 
'avelan', 
 
'tjespe', 
 
'tjespe', 
 
'avelan', 
 
'avelan', 
 
'avelan', 
 
'jakoo', 
 
'avelan', 
 
'avelan', 
 
'email', 
 
'email']; 
 

 
function memeDisplay (i) { 
 
for (i=0; i<meme.length; i++) { 
 
    return ("<div class='meme' style='background-image:url(" + meme[i] + ")'>av " + author[i] + "</div>"); 
 
} 
 
}
body { 
 
    margin:0px; 
 
    background:#FFFFFF; 
 
    background-image: url("jpg/dolan-wallpaper.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: right bottom; 
 
} 
 
.header-cont { 
 
    width:100%; 
 
    position:fixed; 
 
    top:0px; 
 
} 
 
.header { 
 
    height:100px; 
 
    background:#303030; 
 
    border:1px solid #CCC; 
 
    width:960px; 
 
    margin: auto; 
 
    color: #FFFFFF; 
 
    font-size: 300%; 
 
    font-family: monaco; 
 
    vertical-align: central; 
 
    text-align:center; 
 
} 
 
.subheader { 
 
    height:100px; 
 
    background:#303030; 
 
    border:1px solid #CCC; 
 
    width:960px; 
 
    margin: auto; 
 
    color: #FFFFFF; 
 
    font-size: 100%; 
 
    font-family:monaco; 
 
    vertical-align: central; 
 
    text-align:center; 
 
} 
 
.content { 
 
    width:960px; 
 
    background: #303030; 
 
    border: 1px solid #CCC; 
 
    margin: 70px auto; 
 
} 
 
.meme { 
 
    width:300px; 
 
    height:300px; 
 
    background-position:center; 
 
    margin:auto; 
 
    font-family:monaco; 
 
    vertical-align: text-bottom; 
 
    text-align: right; 
 
    color: white; 
 
} 
 
a { 
 
    color:white 
 
}
<!DOCTYPE html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
    <script type="text/javaScript" src="js/script.js"></script> 
 
    <meta charset="UTF-8"> 
 
</head> 
 

 
<body style="background-image: url('jpg/dolan-wallpaper.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: right bottom;"> 
 
    
 
    <div class="header"> 
 
     Olans bæste memes 
 
    </div><br><br><br> 
 
    
 
    <div class="subheader"><br> 
 
     Dette er vår offisielle nettside for memes. Her legger vi jevnlig ut asom memes til offentligheten. Vi lager omtrent alle selv. På hvert meme står det hvem som er forfatteren. Under ser du forhåndsvisninger av alle memesene vi har lagt ut. Bare trykk på de for å se hele bildet. 
 
    </div> 
 
    
 
    <div class="content"> 
 
     <table style="width:100%"> 
 
      <tr></tr> 
 
      <tr> 
 
      <td><a href="meme[0]"><script>memeDisplay(0)</script></a></td> 
 
      <td><a href="meme[1]"><script>memeDisplay(1)</script></a></td> 
 
      <td><a href="meme[2]"><script>memeDisplay(2)</script></a></td> 
 
      </tr> 
 
      <tr> 
 
      <td><a href="meme[3]"><script>memeDisplay(3)</script></a></td> 
 
      <td><a href="meme[4]"><script>memeDisplay(4)</script></a></td> 
 
      <td><a href="meme[5]"><script>memeDisplay(5)</script></a></td> 
 
      </tr> 
 
      <tr> 
 
      <td><a href="meme[6]"><script>memeDisplay(6)</script></a> 
 
      <td><a href="meme[7]"><script>memeDisplay(7)</script></a></td> 
 
      <td><a href="meme[8]"><script>memeDisplay(8)</script></a></td> 
 
      </tr> 
 
      <tr> 
 
      <td><a href="meme[9]"><script>memeDisplay(9)</script></a></td> 
 
      <td><a href="meme[10]"><script>memeDisplay(10)</script></a></td> 
 
      <td><a href="meme[11]"><script>memeDisplay(11)</script></a></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    
 
</body>

我的問題是,當我訪問的網站沒有在表中顯示出來。 如果有人能幫我弄清楚有什麼不對,我將非常感激。

+2

有很多事情錯在你的代碼......這不是在所有的JS是如何工作的。 – blex

+0

把它歸結爲最基本的問題,並從那裏採取。去掉所有不必要的html,css,js和數組元素,真正的問題會讓你盯着你。 – user3791372

回答

1

爲什麼你的代碼不工作?

你的代碼有很多錯誤。

function memeDisplay (i) { 
    for (i=0; i<meme.length; i++) { 
     return ("..." + meme[i] + "..." + author[i] + "..."); 
    } 
} 

邏輯在功能

首先,你memeDisplay看起來你只是想顯示一個梅梅有了它,因爲你通過i作爲參數。如果是這樣,爲什麼你在那裏使用for循環?此外,您的循環將i重置爲0,因此該參數變得無用。

return聲明

然後,return使用函數內部停止功能和...返回的東西。因此,循環再次無用,因爲只會發生一次迭代(第一次迭代期間您return)。

總之,您的功能實際上總是返回"...memes/0.jpg...avelan..."

使用由函數

返回,但這個返回的值是有用的,你將不得不使用它的數據。但是現在,你只是在你的HTML代碼中插入了一些<script>memeDisplay(0)</script>。這不是它的工作原理。 JavaScript不僅僅是在HTML中使用它的功能的值。它只是執行它。您需要執行類似document.write(memeDisplay(0))這樣的操作。但再一次,這不是最好的辦法。

可能的解決方案

您可以從清空表格開始。只需創建一個空表,ID爲myMemeTable,你可以在你的JS中引用。

然後,創建一個displayMemes函數,該函數將使用所有模因填充該表,例如,使用insertRowinsertCell

你可以把它當文件被加載,通過使用

window.addEventListener('load', displayMemes, false);

演示

點擊以下按鈕運行的代碼段嘗試。

var memes = [ 
 
    { url : 'http://shrt.tf/img/cats/s/0', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/1', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/2', author : 'tjespe' }, 
 
    { url : 'http://shrt.tf/img/cats/s/3', author : 'tjespe' }, 
 
    { url : 'http://shrt.tf/img/cats/s/4', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/5', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/6', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/7', author : 'jakoo' }, 
 
    { url : 'http://shrt.tf/img/cats/s/8', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/9', author : 'avelan' }, 
 
    { url : 'http://shrt.tf/img/cats/s/10', author : 'email' }, 
 
    { url : 'http://shrt.tf/img/cats/s/11', author : 'email' } 
 
]; 
 

 
function displayMemes(){ 
 
    var table  = document.getElementById('myMemeTable'), 
 
     CellsPerRow = 3, 
 
     numOfMemes = memes.length, 
 
     numOfRows = Math.ceil(numOfMemes/CellsPerRow); 
 

 
    for(var i=0; i<numOfRows; i++){ 
 
     var row = table.insertRow(); 
 

 
     for(var j=0; j<CellsPerRow; j++){ 
 
      var cell  = row.insertCell(), 
 
       memeIndex = i*CellsPerRow+j; 
 
      if(memeIndex < numOfMemes){ 
 
       cell.innerHTML = "<a href='" + memes[memeIndex].url + "'>" 
 
           + "<div class='meme' style='background-image:url(" + memes[memeIndex].url + ")'>av " 
 
           + memes[memeIndex].author 
 
           + "</div>" 
 
           + "</a>"; 
 
      } 
 
     } 
 

 
    } 
 
} 
 

 
window.addEventListener('load', displayMemes, false);
.meme { 
 
    width:100px; 
 
    height:100px; 
 
    background-position:center; 
 
    text-align: right; 
 
    color: white; 
 
}
<table style="width:100%" id="myMemeTable"> 
 
</table>

+0

非常感謝您的反饋。這非常有用,我也學到了很多東西。我很感激你花時間解釋這一點。 – tjespe