用 jQuery 隐藏父 div 并显示另一个答案

【问题标题】：Hide parent div with jQuery and show another用 jQuery 隐藏父 div 并显示另一个
【发布时间】：2011-03-23 18:29:25
【问题描述】：

我有一个包含多个 div 内容的容器。我需要能够单击“切换”元素并隐藏此父 div，同时显示隐藏在下方的新 div。我想用点击事件来做，但我不知道如何定位这两个 div。

$('.change').click(function() {
      $(this).parent("div").hide().next("div").show();
});


<div id="container">
   <div>
      old content abc <span class="change">switch</span>
   </div>
   <div>
      new content abc  
   </div>

   <div>
      old content 123 <span>switch</span>
   </div>
   <div>
      new content 123  
   </div>

</div>

【问题讨论】：

标签： jquery

【解决方案1】：

嗯，该代码没有任何问题。它会使第一个 div 隐藏，第二个（新内容 abc）可见。

jsfiddle：http://jsfiddle.net/cwolves/nNuG6/1/

【讨论】：

【解决方案2】：

效果很好^_^。看这里：http://jsfiddle.net/maniator/VnSwk/

我会说用 js 做一个改变：

$('.change').click(function() {
    $this = $(this)
    $(this).parent("div").hide().next("div").show().append($this);
});
$('#container').children().hide();
$($('#container').children()[0]).show();

【讨论】：

如果你继续切换它就会崩溃:)
@cwolves。我知道我看到他必须努力。我给了一块垫脚石^_^

【解决方案3】：

这个答案可能为时已晚。您需要做的就是拥有一个开关按钮。如果到达终点，它会回到起点。

var $cdiv = $('#container').find('div');
var i = 0;
$cdiv.hide();    
$('button').click(function() {
    $cdiv.hide();
    $cdiv.eq(i).show();
    $cdivlength >= i ? i++ : i=0;
})

在http://jsfiddle.net/gE8Pv/2/查看工作示例

【讨论】：