javascript - 显示/隐藏 div 并撤消每个 div jQuery 的隐藏

Question

我有另一个关于显示和隐藏嵌套 div 的 jQuery 嵌套 div 问题。

这一次，我可以让初始父 div 隐藏起来，但我无法弄清楚如何将它重新备份到链中？

这是我的:

HTML

<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>

<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>

JS

 $('.undo').hide();

 $('.thing').on('click', function() {
   $(this).closest(".link").hide();
   $(this).parents().next(".undo").show();
   return false;
 });

 $('.go-back').on('click', function() {
   $(this).closest(".undo").hide();
   $(this).parents().next(".link").show();
   return false;
 });

我总是对如何让它以正确的继承为目标感到困惑，无论是它的 parent 、 child 、 parent 还是 sibling ，等等。

Answer 1

这里的问题是，当您想要撤消时，您会搜索 next() 元素，但现在您想要按照标记的顺序搜索 prev() 元素检查这个片段:

$('.undo').hide();

$('.thing').on('click', function() {
  $(this).closest(".link").hide();
  $(this).parents().next(".undo").show();
  return false;
});

$('.go-back').on('click', function() {
  $(this).closest(".undo").hide();
  $(this).parents().prev(".link").show();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>

<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>

---

奖金

您可以像这样将其恢复为一次单击事件:

$('.undo').hide();

$('.item').on('click','a', function() {
  $(this).parent().hide().siblings().show();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>
<div class="item">
  <div class="link">
    <a class="thing" href="#">Click Here</a>
  </div>
  <div class="undo">
    <a class="go-back" href="#">undo that?</a>
  </div>
</div>