jQuery parent() 的解决方案

Question

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

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

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

如果您将鼠标悬停在每个 .item 上，您可以看到引导字形图标 - heart

如果您点击.item，它会移动到.second。之后，如果将.item 悬停在.second 上，心形字形将变为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();
}


});

Answer 2

另外设置一个data-attribute，只不过是用HTML改变了而已。并且为类glyphicon-minus-sign的元素添加了事件绑定

同时删除元素时，请使用.closest('.item')，因为$(this).remove() 将删除图标。

尝试像下面这样重写你的逻辑，

HTML：

<div class="first">
  <div class="itemList">
    <div class="item elem" data-state="loren">
      <div class="desc">Loren Ipsum Dolor</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="loren"></i>
      </div>
    </div>
    <div class="item elem" data-state="sic">
      <div class="desc">Sic Amet</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="sic"></i>
      </div>
    </div>
  </div>
</div>
<div class="second"></div>

JS：

$(document).on('click', '.elem, .glyphicon-minus-sign', function(e) {
  e.stopPropagation();
  if ($(this).parent().attr("class") == "itemList") {
    $(this).removeClass("elem");
    $(this).clone().appendTo('.second');
    $(this).prop('disabled', true);
    $(this).css({
      "opacity": "0.2",
      "-webkit-user-select": "none"
    });
  } else {
    $('.itemList')
      .find('div[data-state="' + $(this).data('state') + '"]')
      .prop('disabled', false)
      .css({
        "opacity": "1",
        "-webkit-user-select": "true"
      }).addClass("elem");
    $(this).closest('.item').remove();
  }
});

DEMO

Answer 3

您可以尝试以下操作，使用父母选择器，您的字形图标的父亲是“图标”，它位于 0 位置。所以：

$(document).ready(function(){

    $(".glyphicon").click(function() {
        if($(this).parents().eq(3).attr("class") == "itemList") {
          $(this).clone().appendTo('.second');
          $(this).prop('disabled', true);
          $(this).css({"opacity": "0.2", "-webkit-user-select": "none"});
        }
        else {
        $('.itemList')
          .find('[data-state="' + $(this).data('state') + '"]')
          .prop('disabled', false)
          .css({"opacity": "1", "-webkit-user-select": "true"});
        $(this).remove();
        }
   });

});