Question

我想要完成的事情。我在网站上有一个清单，我想在按钮点击上添加一个（类似于trello卡）。因为它是很多htlm我想从外部html文件添加它。但是我希望每次添加都有不同的ID。每个id应该看起来像id名称和号码。

希望很清楚。

以下是代码：

$('.new-checklist').on('click', function(e){
  e.preventDefault();
  $.get('new-chk.html',function(data) {
    $('.checklist').append(data);
    $('.checklist-all').attr("id", "chk");
  });
  return false;
});

Answer 1

对于你想要做的事情，你应该尝试不同的选择器，比如位置，而不是CLASS，因为这会选择该类的所有元素，而不仅仅是你想要的那个。由于您使用.append添加新支票，因此您知道它是最后一个支票，因此您可以这样做：

$('.checklist').children().last().attr("id", "chk");

您的代码应为：

＆＃13;

    $('.new-checklist').on('click', function(e){
      e.preventDefault();
      $.get('new-chk.html',function(data) {
        $('.checklist').append(data);
        $('.checklist').children().last().attr("id", "{NEW_ID}");
      });
      return false;
    });

＆＃13;

另外，您可以将html放在外部文件中，但是您应该只加载一次，而不是每次要添加新检查时都执行请求。

Answer 2

您可以使用attr()方法可用的匿名函数来修改属性：

$('.checklist-all').attr("id", function(i){
  // 'i' : the index of the current element of
  // of the collection over which the method
  // iterates:

  // here we return the string 'chk' concatenated
  // with the index:
  return 'chk' + i;
});

虽然要设置id我个人更喜欢使用prop()，但实践中并没有真正的区别。尽管如此，我还是回答Barmar's comment这个问题：

为什么复选框首先需要ID？

参考文献：

attr()。

如何在同一个CLASS名称上添加不同的ID？

2 个答案: