在变量追加 [英] Variables in append
问题描述
我要插入可变数量为追加,使具有可变IMG文件列表。我有这个code:
I want to insert variable number into an append to make lists with variable img file. I have this code:
<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++;
}
}
这使得变量的形式输入,计数器变量,但我想使这个以
This make variable form inputs with the counter variable, but i want to make this with a
<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>
添加里,并与可变数目在img,代替3或4,为每个点击计数器数字
Adding the li and the img with variable number, instead 3 or 4, a counter number for each click.
我怎样才能做到这一点?谢谢你。
How can i do that? Thanks.
推荐答案
如果你不介意的jQuery(我的preference),下面的演示使用虚拟剧本
元素(未知类型)举行的新项目(比code在行字符串好得多)的模板:
If you don't mind jQuery (my preference), the following demonstrates using a dummy script
element (with unknown type) to hold a template for new items (much nicer than in-line strings in the code):
<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);
在code刚刚取代了{N}标记你的新值,那么追加的模板。它采用了常规的前pression与先按g
全局标志为替换
通常仅替换第一个匹配。
The code just replaces the {n} marker with your new value then appends the template. It uses a regular expression with the g
global flag as replace
normally replaces only the first match.
我只是附加的图像,以一个新的div和留在原处现有code。
I just appended the images to a new div and left your existing code in place.
根据的评论,如果你想要的图像编号开始在说6,使用:
Based on the comment, if you want the image numbers to start at say 6, use this:
var $images = $('#Images');
var template = $('#template').html();
template = template.replace(/\{n\}/g, $images.children().length +6);
$images.append(template);
的注:现在也取得了图像列出UL,而不是DIV(我的坏)的:)
这篇关于在变量追加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!