Question

我是编程新手，我正在尝试压缩我的代码。我有一系列缩略图链接出现在一个系列中。

<div class="thumbHolder" id="thumb01"><img src="img/thumb_01.png" width="100" height="100" a/></a></div>
<div class="thumbHolder" id="thumb02"><img src="img/thumb_02.png" width="100" height="100"/></a></div>

我想压缩这段代码，以便我可以使用枚举循环创建一系列链接，其中修改后的div声明可能如下所示：

// where x is iterated to a value equal to the total number of thumbnails
<div class="thumbHolder" id="thumb_" + x><img src="img/thumb_" + x + ".png" width="100" height="100" alt="title" + x/></a></div>

我对循环的研究揭示了一些可能的并发症，但对于专家来说这可能很简单？任何答案将不胜感激！

Answer 1

这个循环迭代抛出一个包含缩略图的数组，将HTML代码写入文档。

    aThumbs = [ 0, 1, 2 ]; // your array

    for ( x = 0; x < aThumbs.length; x++)
    {
       document.write( "<div class='thumbHolder' id='thumb_" + x + "'><img src='img/thumb_" + x + ".png' width='100' height='100' alt='title" + x + "' /></div>" );
    }

由于您没有打开A标记，我删除了结束标记</a>

请注意，此循环以索引0开头，如果要以索引1开头，请执行以下操作：

for ( x = 1; x <= aThumbs.length; x++)

<强> JSFiddle DEMO

编辑：我刚注意到你正在使用您的HTML中的01和02是否就是您要打印变量的方式？上面给出的代码插入了1和2。

Answer 2

你可以使用像

这样的jQuery

 <script>
    for ( x = 1; x <= aThumbs.length; x++) 
    $( "body" )
      .add( "div" )
      .addClass("thumbHolder").attr("id","thumb_"+x).add("img").attr("src","img/thumb_" + x);
    </script>

如何创建一系列简单的类

2 个答案: