请在此处查看我的代码 - 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())?
请帮帮我
最佳答案
只需让 .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();
}
});
关于javascript - jQuery parent() 的解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35704424/