Question

我是一个菜鸟，需要帮助我的jQuery / javascript代码。目前，我有一些函数，当单击包含特定类（.add）的div时，该div的子图像被克隆到容器（#hold）中的另一个重命名的克隆div（#theDiv）中。然后，用户可以单击第二个容器（#hold）中的克隆div，然后删除该div及其内容。希望这不太难理解！

我现在想要在每个克隆的div中包含一个具有特定ID要求的隐藏表单元素以及子图像。棘手的部分是隐藏表单元素中的ID必须包含唯一的标识号，从零开始。当前函数允许用户克隆最多六个div，这意味着当用户点击删除＆＃34; hold＆＃34;中的div时，ID变量号将永远不会超过值5。容器，然后克隆另一个，逻辑需要到位，以防止ID变量号继续超过五的值。

这是我的代码：

HTML：

<!-- User clicked on one of these to clone -->
<div class="add"><img src="http://i62.tinypic.com/2u5yg6g.png"></div>
<div class="add"><img src="http://i62.tinypic.com/2u5yg6g.png"></div>
<div class="add"><img src="http://i62.tinypic.com/2u5yg6g.png"></div>

<!-- theDiv is cloned with contents, renamed and child image is cloned within the new div container  -->
<div id="hold">
    <div id="theDiv" style="display:none;" class="myClass">
       <div class="deletehover delete">Delete</div>
    </div>
</div>

JS：

//<![CDATA[ 
$(window).load(function(){
$('.textI').each(function() {
var default_value = this.value;
$(this).focus(function() {
    if(this.value == default_value) {
        this.value = '';
    }
});

});

function theDiv_append() {
var $hold = $('#hold'),
    len = $hold.children('div').length;

if (len <= 6) {
var clone = $('#theDiv')
              .clone()
              .attr('id','')
              .show()
              .append(
                  $('<div>').html(
                      $(this).children('img').clone()
                  ).addClass('packimage delete')
              );
$('#hold').append(clone)
} else {
    alert('You have already selected a full pack of photos.');
}
}
$(document).on('click', '.add', theDiv_append);

$(function(){  
  $(document).on("click", ".delete", function(){
    $(this).parent('div').remove();
  });
});

});//]]>

隐藏表单字段ID，其中＆＃34;＃＆＃34;应该等于0-5的唯一值：

textField#

示例隐藏字段，其id为第一个克隆div集：

<input type="hidden" id="textField0" name="custom_name" value="custom_value">

当前工作示例的JSfiddle：http://jsfiddle.net/sstracy/GMs7k/2/

解决这个问题的任何帮助都是惊人的！提前谢谢。

Answer 1

只需添加

由于你说你不能使用Len，所以创建一个IDX var并使用id =＆＃34; textfield＆＃39; +（IDX ++）+＆＃39;＆＃34;＆gt;＆＃39;像这样

$('<div>')
  .html($(this).children('img').clone())
  .append('<input type="hidden" id="textfield'+IDX+'">')
  .addClass('packimage delete')

Answer 2

因此，经过深思熟虑，我最后通过对自己问题的一个相当简单的回答来解决问题。我会以社区的利益发布我的答案。

由于在用户删除他们想要的任何克隆后确定哪些ID可用时变得相当复杂，因此每次用户单击以创建新克隆时，代码都会重置所有ID值。

所以首先我添加了一个没有任何ID的隐藏输入字段：

.append('<input type="hidden">');

然后在带有子图像的克隆DIV之后，现在创建了隐藏的输入，我计算了我的容器中的所有子输入字段＆＃34; #hold＆＃34;并为他们分配一个新的ID，其中包括jQuery的内置数字＆＃34;索引＆＃34;功能，从零开始。如果隐藏的输入字段已经有ID值，则会被新的输入字段覆盖：

$("#hold input").each(function(index) {
     $(this).attr("id", "textField" + index);
});

我向Fiddle添加了一个示例文本字段，以便您可以看到给定值的时间：http://jsfiddle.net/M82pG/2/

添加＆amp;将变量id减去新的隐藏表单元素

2 个答案: