2015-09-05 79 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