附加变量

Question

我想在一个追加中插入变量号来制作带有变量img文件的列表。我有这段代码：

<form method="POST">
     <div id="dynamicInput">
          Entry 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

这使变量形式输入与计数器变量，但我想用

来做这个

<li>, check this:

 <ul class="popupimg">
                        <li><a href="Imagenes/img1.png" class="image-link"><img src="Imagenes/img1.png" alt="Img1" title="Img1"></a></li>
                        <li><a href="Imagenes/img2.png" class="image-link"><img src="Imagenes/img2.png" alt="Img2" title="Img2"></a></li>
                        <li><a href="Imagenes/img3.png" class="image-link"><img src="Imagenes/img3.png" alt="Img3" title="Img3"></a></li>
                        <li><a href="Imagenes/img4.jpg" class="image-link"><img src="Imagenes/img4.jpg" alt="Img4" title="Img4"></a></li>
                        <li><a href="Imagenes/img5.jpg" class="image-link"><img src="Imagenes/img5.jpg" alt="Img5" title="Img5"></a></li>
                        <li><a href="Imagenes/img6.jpg" class="image-link"><img src="Imagenes/img6.jpg" alt="Img6" title="Img6"></a></li>

                    </ul>

为li和img添加可变数字，而不是3或4，每次点击都有一个计数器。

我该怎么做？感谢。

Answer 1

如果你不介意jQuery（我的偏好），下面演示了如何使用虚拟script元素（具有未知类型）来保存新项目的模板（比在线字符串更好）代码）：

<script id="template" type="text/template">
    <li><a href="Imagenes/img{n}.png" class="image-link"><img src="Imagenes/img{n}.png" alt="Img{n}" title="Img{n}"/></a></li>
</script>

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vs6K9/1/

    var $images = $('#Images');
    var template = $('#template').html();
    template = template.replace(/\{n\}/g, counter);
    $images.append(template);

代码只是用新值替换{n}标记，然后附加模板。它使用带有g全局标志的正则表达式replace通常只替换第一个匹配。

我只是将图片附加到新的div并将现有代码留在原位。

根据评论，如果您希望图像编号从6开始，请使用：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vs6K9/26/

    var $images = $('#Images');
    var template = $('#template').html();
    template = template.replace(/\{n\}/g, $images.children().length +6);
    $images.append(template);

注意：现在也使图像列表成为UL而不是DIV（我的坏）：）