我如何让一个子元素操纵父母兄弟姐妹？

Question

这就是我的数据：

<div class="shower">
</div>
<div class="container">
    <div class="box">
        <div class="hider">
        </div>
    </div>
</div>
<div class="shower">
</div>
<div class="container">
    <div class="box">
        <div class="hider">
        </div>
    </div>
</div>

隐藏hider我想隐藏（）.container并显示位于最近的.container之前的.shower。 Onclick of .shower我想隐藏.shower，点击并显示下一个.container。

我如何在jquery中实现这一点？我应该重组我的HTML吗？

Answer 1

这样的事情：

$('.hider').click(function(e) {
  var container = $(this).parent().parent();
  container.hide();
  var shower = container.prev();
  shower.show();
})

的jsfiddle：

• http://jsfiddle.net/eqDWk/

如果您想使用closest：

，请执行此操作

$('.hider').click(function(e) {
  var container = $(this).closest('.container');
  container.hide();
  var shower = container.prev();
  shower.show();
})

的jsfiddle：

• http://jsfiddle.net/eqDWk/1/

Answer 2

基于icyrock's漂亮的代码，您可以添加此代码以再次显示容器：

$('.hider').click(function(e) {
  var container = $(this).parent().parent();
  container.hide();
  var shower = container.prev();
  shower.show();
})

$('.shower').click(function(e) {
  var container = $(this).next();
  container.show();
  $(this).hide();
})
​

jsFill fork of icyrock的原文：http://jsfiddle.net/Z7ZTN/1/