如何通过单击来否决 .hide() 以重新显示所有项目？

Question

我正在尝试显示内容切换器（box1、box2 等）中的所有项目，一旦您单击其目标按钮就会显示。

我已经包含了一个带有 .show(); 的删除按钮；针对特定的类，但似乎点击函数之外的 .hide() 推翻了 .show()。

我想做什么？

（一旦点击红色的 x div，所有项目（.r-target）都应该显示）

$('.r-picker li').click(function() {
  /* adds remove button  */
  $('.r-picker .r-picker-remover').hide();
  $('.data', this).append('<div class="r-picker-remover">x</div>');

  $('.r-picker-remover').click(function() {
    $('.r-target').show();
  });

  /* box content switcher */
  $('.r-target').hide(); /* If button gets clicked, all list gets hidden */
  $('.r-list' + $(this).attr('target')).show();
});

li {
  list-style: none;
}
.r-picker {
  display: inline-block;
  margin-bottom: 20px;
}
.r-picker li {
  float: left;
  margin-right: 20px;
  background: #ddd;
  border-radius: 3px;
  padding: 5px 10px;
}
.r-picker li:hover {
  cursor: pointer;
}
.r-picker-remover {
  background: red none repeat scroll 0 0;
  border-radius: 3px;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li target="1">
      <div class="data">
        box 1
      </div>
    </li>
    <li target="2">
      <div class="data">
        box 2
      </div>
    </li>
    <li target="3">
      <div class="data">
        box 3
      </div>
    </li>
    <li target="4">
      <div class="data">
        box 4
      </div>
    </li>
    <li target="5">
      <div class="data">
        box 5
      </div>
    </li>
    <li target="6">
      <div class="data">
        box 6
      </div>
    </li>
  </ul>
</div>


<div class="r-list">
  <ul>
    <li class="r-target r-list1">content box 1</li>
    <li class="r-target r-list2">content box 2</li>
    <li class="r-target r-list3">content box 3</li>
    <li class="r-target r-list4">content box 4</li>
    <li class="r-target r-list5">content box 5</li>
    <li class="r-target r-list6">content box 6</li>
  </ul>
</div>

现在，显然$('.r-target').hide(); 正在覆盖以下代码：

$('.r-picker-remover').click(function()
{
   $('.r-target').show();
});

我不知道如何使该点击功能起作用，因为每次我点击.r-picker li 切换框中的内容时，它都会显示广告：无；致所有.r-target。

我该如何解决这个问题？

我尝试使用$('.r-picker li').one('click', function({ //code here }); 而不是$('.r-picker li').click(function() { //code here });，但遗憾的是这不起作用，因为它会阻止内容切换器触发。

Answer 1

问题是当您点击.r-picker-remover 时，点击会冒泡到li。所以它会显示所有的框，然后再次隐藏它们。

使用event.stopPropagation() 阻止它冒泡。

另外，不是每次添加移除器时都添加点击处理程序，而是使用事件委托绑定处理程序一次。您的方式是每次单击 li 时为每个移除程序添加多个事件处理程序。

$('.data').on("click", ".r-picker-remover", function(e) {
  $('.r-target').show();
  e.stopPropagation();
});

$('.r-picker li').click(function() {
  /* adds remove button  */
  $('.r-picker .r-picker-remover').hide();
  $('.data', this).append('<div class="r-picker-remover">x</div>');


  /* box content switcher */
  $('.r-target').hide(); /* If button gets clicked, all list gets hidden */
  $('.r-list' + $(this).attr('target')).show();
});

li {
  list-style: none;
}
.r-picker {
  display: inline-block;
  margin-bottom: 20px;
}
.r-picker li {
  float: left;
  margin-right: 20px;
  background: #ddd;
  border-radius: 3px;
  padding: 5px 10px;
}
.r-picker li:hover {
  cursor: pointer;
}
.r-picker-remover {
  background: red none repeat scroll 0 0;
  border-radius: 3px;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li target="1">
      <div class="data">
        box 1
      </div>
    </li>
    <li target="2">
      <div class="data">
        box 2
      </div>
    </li>
    <li target="3">
      <div class="data">
        box 3
      </div>
    </li>
    <li target="4">
      <div class="data">
        box 4
      </div>
    </li>
    <li target="5">
      <div class="data">
        box 5
      </div>
    </li>
    <li target="6">
      <div class="data">
        box 6
      </div>
    </li>
  </ul>
</div>


<div class="r-list">
  <ul>
    <li class="r-target r-list1">content box 1</li>
    <li class="r-target r-list2">content box 2</li>
    <li class="r-target r-list3">content box 3</li>
    <li class="r-target r-list4">content box 4</li>
    <li class="r-target r-list5">content box 5</li>
    <li class="r-target r-list6">content box 6</li>
  </ul>
</div>