Question

我有以下两次调用的函数：

function (data) {
   $.each(data.items, function(i,item) {    
                  var $items = $('<div class="col-sm-4 grid-item"><div class="thumbnail"><input type="checkbox" name="thing_'+i+'" value="valuable" id="thing_'+i+'"/><label for="thing_'+i+'"><img class="img-responsive" src="' + item.link + '"></label></div></div>');`enter code here`

它会生成复选框，我正在使用name生成标识符for id和i，并告诉我：

thing_1
thing_2
thing_3

问题在于，当我第二次运行该功能时，i再次启动，导致重复的ids和name以及for

Answer 1

使用IIFE：

var uniqueId = (function() {
  var counter = 0;

  return function(prefix) {
    counter++;
    return prefix ? prefix + '' + counter : counter;
  }
})();

console.log(uniqueId()); // 1
console.log(uniqueId()); // 2
console.log(uniqueId('thing_')); // thing_3
console.log(uniqueId('thing_')); // thing_4

您可以将它集成到您的代码中：

function (data) {
  $.each(data.items, function(i, item) {
    var uniq = uniqueId('thing_');
    var $items = $('<div class="col-sm-4 grid-item">'.concat(
      '<div class="thumbnail">',
      '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />',
      '<label for="', uniq, '">',
        '<img class="img-responsive" src="' + item.link + '">',
      '</label>',
    '</div>',
  '</div>'));

我使用String.prototype.concat

在多行上打破了巨大的HTML混乱

如何在重复函数上生成唯一ID？

1 个答案: