Question

这个问题很复杂（但我找不到），所以如果它是多余的，我会道歉。我试图使用JQuery的.remove函数来允许删除（显然）我的静态HTML原型中的li元素。我想知道是否可以单独用JS创建递增ID，而不是为每个li写出一个javascript块。（我正在使用Serve与HAML和SASS fyi）。这就是我所拥有的。

/view-file.html.haml

%ul
  %li#removeThis1
    %a.remover1{:src => "#"} Remove

/application.js

...
$(".remover1").click(function () {
  $("li#removeThis1").fadeOut( function() { $(this).remove(); });
});

有关如何将.remover1增加到.remover2等的任何想法？同样地li##removeThis1到#removeThis2等等。

我需要在页面加载时发生这一切。

Answer 1

元素之间存在祖先关系，所以只需使用它就可以了。

  // don't bother numbering the class. Use a common class
$(".remover").click(function () {

       // find the closest ancestor with an ID that start with "removeThis"
    $(this).closest("li[id^=removeThis]")
           .fadeOut( function() { $(this).remove(); });
});

或者如果你真的不需要祖先的ID，也可以在那里使用一个类......

  // don't bother numbering the class. Use a common class
$(".remover").click(function () {

       // find the closest ancestor with the class "removeThis"
    $(this).closest(".removeThis")
           .fadeOut( function() { $(this).remove(); });
});

最终，如果您要使用ID，则需要在服务器端生成它们，然后使用处理程序从元素中提取ID的数字部分，并将其连接到祖先的选择器中。 / p>

使用JQuery创建唯一ID

1 个答案: