Question

我有以下HTML标记：

<div id="step1" class="step">
                    <h1>Enter code</h1>
                    <p><input type="text" value="<%= @groupCode %>" name="group_code" class="span3" />
                        <a class="btn btn-primary btn-medium">
                            Next &raquo;
                        </a>
                    </p>
                </div>
                <div id="step2" class="step" style="display: none">
                    <p>Hello World</p>
                </div>

点击链接（.btn）后，我需要显示下一个父div（#step2）。我将其设计为注册过程，因此将有多个父div（所有以step {：id}命名）

非常感谢任何帮助！

Answer 1

你应该可以使用类似的东西：

//This should access the parent (step1), then the next element (step2)
$(this).parent().next()

Answer 2

jQuery('.btn').click(function(){
    jQuery(this).closest('.step').next().show();
});

Answer 3

$(function(){
  $(".step a.btn").click(function(){
   var item= $(this);
   item.parent().parent().next().show();
  });
});

如果你想隐藏当前的那个并显示下一个有一些褪色效果，你可以这样做

$(function(){   
  $(".step a.btn").click(function(){
   var item= $(this);
      item.parent().parent().fadeOut(400,function(){
        item.parent().parent().next(".step").fadeIn(300);
      });
  });
});

以下是一个示例：http://jsfiddle.net/Jm7fW/15/

jQuery显示下一个父div

3 个答案: