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

Question

我有一个容器，里面有几个带内容的div。我需要能够单击“切换”元素并隐藏此父div，同时显示隐藏在下方的新div。我想过用click事件做这件事，但我不知道如何定位这两个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>

Answer 1

嗯，那个代码没什么问题。它会使第一个div隐藏，第二个（新内容abc）可见。

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

Answer 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();

Answer 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/

处的工作示例