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()方法，以便选择相应的兄弟节点，以便淡入/淡出它们。

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 s的多个元素。我只是将#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()。

将div替换功能限制为父div

1 个答案: