在新的隐藏表单元素中添加和减去变量 id

Question

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

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

这是我的代码：

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，其中“#”应为 0-5 范围内的唯一值：

textField#

具有第一个克隆 div 集 id 的隐藏字段示例：

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

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

任何解决这个问题的帮助都会很棒！提前谢谢你。

Answer 1

因此，经过深思熟虑，我最终自己找出了一个相当简单的答案来回答我自己的问题。为了社区的利益，我会发布我的答案。

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

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

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

然后在使用子图像克隆 DIV 并且现在创建隐藏输入之后，我计算容器“#hold”中的所有子输入字段并为它们分配一个新 ID，其中包括 jQuery 的内置数字“索引”函数，从零开始。如果隐藏的输入字段已经有一个 ID 值，它会被一个新的值覆盖：

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

我在 Fiddle 中添加了一个带有文本字段的示例，以便您可以查看何时给出的值：http://jsfiddle.net/M82pG/2/

Answer 2

添加就行了

既然你说你不能使用 Len，那就创建一个 IDX var 并像这样使用 id="textfield'+(IDX++)+'">'

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