显示阵列中的背景照片

Question

我正在制作一个 table 的网站。每个单元格都应该有自己的背景图片。我选择将这些图像放在一个数组中。我做了一个功能来创建一个以照片为背景，作者为文本。我的代码在：

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>

我的问题是，当我访问该网站时，table 中没有显示任何内容。如果有人能帮我找出问题所在，我将不胜感激。

Answer 1

为什么您的代码不起作用？

你的代码有很多问题。

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

你函数中的逻辑

首先，你的 memeDisplay 看起来你只想显示一个模因，因为你将 i 作为参数传递。如果是这样，为什么要在其中使用 for 循环？此外，您的循环将 i 重置为 0，因此参数变得无用。

return语句

然后，return 在函数内部使用来停止函数和... return 一些东西。所以，再一次，循环是无用的，因为只会发生一次迭代（你 return 在第一次迭代中）。

简而言之，你的函数实际上总是returns "...memes/0.jpg...avelan..."。

使用函数return编辑的数据

但是要使这个 returned 值有用，您必须使用它。但是现在，您只是在 HTML 代码中插入了一些 <script>memeDisplay(0)</script>。它不是这样工作的。 JavaScript 不只是打印你在 HTML 中使用它的函数的值。它只是执行它。您需要执行类似 document.write(memeDisplay(0)) 的操作。但再一次，这不是最好的方法。

可能的解决方案

您可以先清空 table。只需创建一个空的 table，ID 为 myMemeTable，您可以在您的 JS 中引用它。

然后，创建一个 displayMemes 函数，用所有模因填充 table，例如，使用 insertRow 和 insertCell。

您可以在加载文档时调用它，使用

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>

显示阵列中的背景照片

Displaying background photos from array

html

javascript

background

photo

为什么您的代码不起作用？

可能的解决方案

演示