Javascript jQuery父级（）的解决方案

请看我这里的密码-

首先，我将告诉您它的功能

如您所见，有两个容器：

.first

和

.second

。在

.first

中，默认情况下，我还有两个div。它们都是

.item

。Class

。默认情况下，second

为空

如果将每个

.item

悬停，您可以看到引导图示符图标-

心脏

如果单击

.item

，它将移动到

.second

。之后，如果将

.item

悬停在

.second

上，心脏图示符将变为

减号

它看起来对我很好。但是jQuery代码有一个非常小的问题

在我的示例中，我单击所有

.item

容器，并将此容器克隆（）到

.second

（请查看我的jQuery代码）。但事实上，我只需要点击glyphicon，然后它的

.item

容器将克隆（）到

.second

换句话说，现在我有了第一行-

$（文档）
但是我需要类似的
$（文档）。在（'click'，'glyphicon heart'，function（）
，作为第一行

我可以用parent（）？或另一个jQuery方法（closest（），has（））来实现这一点吗

请帮帮我
只需设置一个
数据属性
。此外，HTML只更改了该属性。并且为类为
glyphicon减号的元素添加了事件绑定

另外，在删除元素时，请使用
.nexist（'.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>

$(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();
  }
});

只需设置一个
数据属性
，除此之外，HTML只对其进行了更改。对于类为
glyphicon减号的元素，添加了事件绑定

另外，在删除元素时，请使用
.nexist（'.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>

$(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();
  }
});

只需使.glipicon可单击，然后选择.item并替换$（此选项）：

变量项=$（此）

只需使.glipicon可单击，然后选择.item并替换$（此选项）：

变量项=$（此）

您可以尝试以下操作，使用父选择器，glyphicon的父项是“icons”，它位于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();
        }
   });

})；
您可以尝试以下操作，使用父选择器，您的glyphicon的父项是“icons”，它位于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();
        }
   });

}))
 
$（this）.parent（）.parent（）
可以工作，但非常脆弱，文档结构稍有变化就会崩溃<代码>$（此）。最近（'.item'）

会安全得多。@ST94您想在克隆发生后为图标创建单击事件。是吗？@silviagreen我可以再问你一个问题吗？您的物品有点小问题。道具（'disabled'，true）；。当我单击.glyphion心形图标时，我可以向.right面板中添加不仅仅一个this.item。所以，我明白了，$（this）.prop（'disabled'，true）更好solution@silviagreen这是一个更新的if部分，但我仍然有其他问题part@silviagreen这是您的else-

$（'.itemList'）.find（'[data state=“'+item.data（'state'）+'“]'））.prop（'disabled'，false.）.css（{“opacity”：“1”，“-webkit用户选择”：“true”}）。这对我来说几乎是一个很好的解决方案，但有一个时刻-我需要
.prop（'disabled'，false）
到
$（this）
字形图标，而不是所有
项目
$（this）。parent（）.parent（）
工作起来但是非常脆弱，它会在文档结构中稍有变化时崩溃<代码>$（此）。最近（'.item'）
会安全得多。@ST94您想在克隆发生后为图标创建单击事件。是吗？@silviagreen我可以再问你一个问题吗？您的物品有点小问题。道具（'disabled'，true）；。当我单击.glyphion心形图标时，我可以向.right面板中添加不仅仅一个this.item。所以，我明白了，$（this）.prop（'disabled'，true）更好solution@silviagreen这是一个更新的if部分，但我仍然有其他问题part@silviagreen这是您的else-
$（'.itemList'）.find（'[data state=“'+item.data（'state'）+'“]'））.prop（'disabled'，false.）.css（{“opacity”：“1”，“-webkit用户选择”：“true”}）。这对我来说几乎是一个很好的解决方案，但有一个时刻-我需要
.prop（'disabled'，false）
到
$（这个）
字形图标，不是所有的
项目
这是一个很好的答案，但仍然有一个小问题。我需要同样的东西，你们不仅为
.glyphicon减号
，而且为
.glyphicon心脏
也需要同样的东西。只有字形图标可以点击你已经创造了我所需要的一半，谢谢。位于
.second
中的项目现在移动到
。仅在
上移动到
中的第一个
。Glyph图标减号
单击。对于位于
中的
.glyphicon heart
项目，我需要同样的东西。首先，这是一个很好的答案，但仍然有一个小问题。我需要同样的东西，你们不仅为
.glyphicon减号
，而且为
.glyphicon心脏
也需要同样的东西。只有字形图标可以点击你已经创造了我所需要的一半，谢谢。位于
.second
中的项目现在移动到
。仅在
上移动到
中的第一个
。Glyph图标减号
单击。对于位于
.first