Question

我有一个用户可以创建页面的工作屏幕，并且作为该过程的一部分，可以为不同语言的页面创建多个标签。必须至少有一个标签，最多可以为10个（当前）。

为实现这一目标，我已经获得了语言选择和值输入的模板，以及添加和删除标签的按钮：

＆＃13;

function addLabel(show_eng) {
  var template = $('#label_template').html();

  $('#labels_div').append(template);
}

function removeLabel(remove_btn) {
  $(remove_btn).closest(".label-div").remove();
}

＆＃13;

<div id="labels_div">
  <div class="width-100 f-left">
    <a id="new_label" class="btn f-right" title="Add a new label">
      <i class="fa-icon-plus"></i>
      <span class="margin-left-5">Label</span>
    </a>
  </div>
</div>

<script id="label_template" type="text/x-template">
  <cfoutput>
    <div class="width-100 f-left margin-bottom label-div">
      <div class="width-45 f-left">
        <select class="dropdown-field-padding width-94 f-left">
          <option value="0">Select a language....</option>
          <cfloop from="1" to="#ArrayLen(languages)#" index="alpha">
            <option value="#languages[alpha].ID.xmltext#">#languages[alpha].Name.xmltext#</option>
          </cfloop>
        </select>
      </div>
      <div class="width-45 f-left">
        <input class="input-field-padding width-90 f-left" value="">
      </div>
      <div class="width-10 f-left">
        <a class="btn f-right" onclick="removeLabel($(this));" title="Remove label">
          <i class="fa-icon-remove"></i>
        </a>
      </div>
    </div>
  </cfoutput>
</script>

＆＃13;

我遇到的问题是我们正在使用的验证系统要求验证的每个元素都有一个ID（用于在正确的输入处定位错误消息）。

是否有一些javascript / JQuery snippit我可以放入我的addLabel函数中，为语言下拉列表和值输入字段添加唯一ID？或者某种方式我可以更改模板本身来处理/创建ID？

这对我们来说非常重要，所以我不想为此功能安装全新的JS库。

Answer 1

添加此剪辑以编号ID：

var index = 1;
$('select, input').each(function(){
    $(this).attr('id',index);
    index++;
});

或类似的......

用于重复元素的HTML模板+唯一ID

1 个答案: