我想在变量中插入变量号以使变量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,每次点击都有一个计数器编号。
我怎样才能做到这一点? 谢谢。
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>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(我的偏好),下面演示使用一个虚拟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(我的坏) :)
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);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.
I just appended the images to a new div and left your existing code in place.
Based on the comment, if you want the image numbers to start at say 6, use this:
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);Note: also now made the images list a UL instead of DIV (my bad) :)
更多推荐
img,counter,variable,电脑培训,计算机培训,IT培训"/> <meta name="descript
发布评论