5

次の 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} で名前が付けられています)。

どんな助けでも大歓迎です！

4

3 に答える 3

10

次のようなものを使用できるはずです。

//This should access the parent (step1), then the next element (step2)
$(this).parent().next()
于 2012-04-16T17:38:29.223 に答える
2 
jQuery('.btn').click(function(){
    jQuery(this).closest('.step').next().show();
});
于 2012-04-16T17:39:02.397 に答える
2 
$(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/

于 2012-04-16T17:39:27.877 に答える