Question

我有另一个jQuery嵌套div问题，显示和隐藏嵌套的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;
 });

我总是对如何使它定位正确的继承感到困惑，无论是父母，孩子，父母，还是兄弟姐妹等。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

加成

您可以将此恢复为只有一次点击事件：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用你的例子，你需要进入前两个级别（parent（）。parent（）），然后找到.link并显示

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

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

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

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

2 个答案:

加成