jquery - 将 div 替换功能限制为父 div

Question

我试图通过单击链接将一个子 div 替换为另一个子 div。我有一个“工作”草稿( https://jsfiddle.net/graemebryson/bttuapq7/ )，但我不确定如何限制该函数仅影响父 div。就目前情况而言，单击链接会使所有 div 发生更改，因为它们共享相同的类名。

如何确保该函数只影响父级 div？我已经尝试过这个( https://jsfiddle.net/graemebryson/eqqj3sjp/1/ )，但它似乎完全破坏了它(下面粘贴的代码)。

我的逻辑可能也很疯狂，所以任何反馈都将受到极大的赞赏。

<小时/>

编辑:解决了，有了更好的解决方案，感谢@JoshCrozier - 在这里工作:https://jsfiddle.net/9w4v1wqn/

<小时/>

HTML

<div class="one-half first content-flip">

<div class="box-overview">
  <h5>Item 1 Overview</h5>
  <p>Lorem ipsum dolor sit amet.</p>
  <a id="show-details" class="btn">Show details</a>
</div>

<div class="box-detail" style="display:none;">
  <h5>Item 1 Details</h5>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <a id="hide-details" class="btn">Hide details</a>
</div>

</div>

<div class="one-half content-flip">

<div class="box-overview">
  <h5>Item 2 Overview</h5>
  <p>Lorem ipsum dolor sit amet.</p>
  <a id="show-details" class="btn">Show details</a>
</div>

<div class="box-detail" style="display:none;">
  <h5>Item 2 Details</h5>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <a id="hide-details" class="btn">Hide details</a>
</div>

</div>

jQuery

jQuery(document).ready(function($) {

  $("#show-details").click(function() {
    $(this).closest(".box-overview").hide();
    $(this).closest(".box-detail").fadeIn();
  });

  $("#hide-details").click(function() {
    $(this).closest(".box-detail").hide();
    $(this).closest(".box-overview").fadeIn();
  });

});

Answer 1

您需要使用this keyword为了获取对发生 click 事件的元素的引用。在下面的代码片段中，this 指的是 .show-details 或 .hide-details。

.closest() method用于遍历 DOM 以选择祖先 .box-overview 或 .box-detail 元素。您还会注意到我链接了 .next()/.prev()方法来选择相应的 sibling ，以便将它们淡入/淡出。

Updated Example

$(".show-details").click(function() {
  $(this).closest(".box-overview").hide().next(".box-detail").fadeIn();
});

$(".hide-details").click(function() {
  $(this).closest(".box-detail").hide().prev(".box-overview").fadeIn();
});

顺便说一句，id 在文档中应该是唯一的。由于您复制了 id 属性值，因此事件监听器不会附加到具有相同 id 的多个元素。我只是将 #show-details/#hide-details 更改为类。

<小时/>

顺便说一句，您可以将代码压缩为以下内容:

Example Here

$(".toggle-visibility").on('click', function() {
  $(this).parent().toggle().siblings().fadeToggle();
});

这与上面的代码片段类似，除了没有专用的 .show-details/.hide-details 元素，而是有一个 .toggle-visibility 元素将显示或隐藏相应的元素。 .toggle() method用于切换元素的可见性(它用于代替 .show()/.hide())。然后.fadeToggle() method用于代替 .fadeIn()。