我还有另一个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;
 });


我总是对如何获取它以正确的继承为目标感到困惑,无论它是父母,孩子,父母,兄弟姐妹等。

最佳答案

这里的问题是,当您想撤消搜索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>

关于javascript - 显示/隐藏div并撤消每个div的隐藏jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42772174/

10-12 12:59
查看更多