javascript - jQuery parent() 的解决方案

Question

请在此处查看我的代码 - https://jsfiddle.net/johndoe1994/xtu09zz9/

首先，我会告诉你它的功能

如您所见，有两个容器:.first 和.second。在 .first 中，默认情况下，我还有另外两个 div。它们都是.item。类 .second 默认为空。

如果将鼠标悬停在每个 .item 上，您会看到 Bootstrap 字形 - heart

如果您单击 .item，它会移动到 .second。之后，如果将 .item 悬停在 .second 上，heart glyphicon 将变为 minus sign

我觉得不错。但是 jQuery 代码有一个非常小的问题

在我的示例中，我单击所有 .item 容器并将此容器 clone() 到 .second(请查看我的 jQuery 代码)。但实际上，我只需要单击 glyphicon，然后它的 .item 容器将 clone() 到 .second

所以，换句话说，现在我有了第一行 - $(document).on('click', '.item', function()但我需要像 $(document).on('click', '.glyphicon-heart', function() 这样的东西作为第一行

我可以用 parent() 做这个吗？或者其他 jQuery 方法(closest()、has())？

请帮帮我

Answer 1

只需让 .gliphicon 可点击，然后选择 .item 并使用 $(this) jsfiddle updated 代替:

$(document).on('click', '.glyphicon', function() {

var item = $(this).closest(".item");

if(item.parent().attr("class") == "itemList") {
    item.clone().appendTo('.second');
    $(this).prop('disabled', true);
    item.css({"opacity": "0.2", "-webkit-user-select": "none"});
}
else { //NEW ELSE
    var i = $('.itemList').find('[data-state="' + item.data('state') + '"]');

        i.css({"opacity": "1", "-webkit-user-select": "true"});
        i.find(".glyphicon").prop('disabled', false);

    item.remove();
}


});