将div替换函数限制为父div

Question

我试图用一个链接点击替换另一个子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的多个元素。我只是将#show-details/#hide-details改为类。

---

作为一个侧面说明，您可以将您的代码如下：

Example Here

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

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