Question

此代码动态地为每个项目的id添加唯一编号。我希望能够为每个新classes中的某些id's和clone()添加唯一标识符，而不仅仅是.item本身。

在此代码段中，我需要该功能遵循[data-input="checkbox0"]和[class="radio0"]的相同模式。

作为奖励，我希望新.add只有一个clone()按钮.items，而不是每个.item内有一个。{/ p>

＆＃13;

var rowNum = 0;
$("body").on("click", ".add", function() {
  rowNum++;
  var $item = $(this).parents('.item');
  var next = $item.clone();
  next.attr('id', 'item' + rowNum);
  $item.after(next);
});

＆＃13;

.item {
  border: 2px solid;
  height: 50px;
  width: 50px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
  <label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
  <label>
<input type="radio" class="radio0">
<div class="add">
<button type="button" class="addbtn">Add</button>
</div>
</div>

＆＃13;

Answer 1

您只需稍微更改html，在外面移动添加按钮，然后使用$('.item').last()获取列表项的最后一项

＆＃13;

var rowNum = 0;
$("body").on("click", ".addbtn", function() {
  rowNum++;
  var $item = $('.item').last();
  var next = $item.clone();
  next.attr('id', 'item' + rowNum);
  $item.after(next);
  next.find('input[type="checkbox"]').attr('data-input', 'checkbox' + rowNum);
  next.find('input[type="radio"]').attr('data-input', 'radio' + rowNum);
  
});

＆＃13;

.item {
  border: 2px solid;
  height: 50px;
  width: 50px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="item" id="item0">
  <label class="icon">
  <input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
  </label>
  <input type="radio" class="radio0" />
</div>

<button type="button" class="addbtn">Add</button>

＆＃13;

Answer 2

你可能想要这样的东西。

$("body").on("click", ".addbtn", function() {
  var $item = $('.item').last();
  var next = $item.clone();

  // Gets last number dynamically, instead of saving it as global variable.
  var rowNum = parseInt($item.attr("id").substr(4)) + 1;
  next.attr('id', 'item' + rowNum).find("input[type='checkbox']").attr("data-input", "checkbox" + rowNum);
  next.find("input[type='radio']").attr("class", "radio" + rowNum);
  $item.after(next);
});

.item {
  border: 2px solid;
  height: 50px;
  width: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="item" id="item0">
  <label class="icon">
  <input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
  </label>
  <input type="radio" class="radio0" />
</div>

<button type="button" class="addbtn">Add</button>

jQuery为clone（）上的输入和类添加唯一标识符

2 个答案: