0

jQuery を初めて使用しますが、ご容赦ください。ユーザーが1 つのボタンをクリックすると、一度に 1 つずつ表示する繰り返しフィールドセットを含むフォームがあります。基本的なレイアウトは次のとおりです。

<form>
   <fieldset>
       <input 1>
       <input 2>
       <div id="address-container">
           <fieldset> <!--  current address -->
               <input 3>
               <input 4>
           </fieldset>
           <div id ="previous-address-1" class="hidden">
           <fieldset>
               <input 5>
               <input 6>          
           </fieldset>
           </div>
           <div id ="previous-address-2" class="hidden">
           <fieldset>
               <input 5>
               <input 6>          
           </fieldset>
           </div>
           <div id ="previous-address-3" class="hidden">
           <fieldset>
               <input 5>
               <input 6>          
           </fieldset>
           </div>
       </div> <!--  close address-container -->
     <span class="button"><a href="#" id="show-hidden">Add a Previous Address</a></span>
   </fieldset>
</form>

クリックするとすべての .hidden-div を一度に表示できますが、必要に応じてユーザーがもう一度クリックして別のネストされたフォーム フィールドセットを追加して、一度に 1 つずつ表示しようとしています。ボタンを追加して各IDにアタッチし、クリックすると非表示にできることはわかっていますが、next（）および/またはeq（）を使用して冗長な方法がないように思われます。

繰り返しますが、おそらく追加はより良いルートでしょうか??

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

4

3 に答える 3

0

これを試して、

$('.button').on('click',function(){
   var elem= $('.hidden:first');
   if($('.show').length)
   {
      elem=$('.show').next('div.hidden');
      $('.show').removeClass('show');
   }
   elem.addClass('show');
   return false;// to prevent for submit
});

デモ

于 2013-11-01T06:56:50.513 に答える
0

はい。それで合っています。セレクターでeqを使用できます。

$('#show-hidden').click(function(event){
    event.preventDefault();

    $('#address-container .hidden:eq(0)').removeClass('hidden');
});

例: http://jsbin.com/aMuHAhe/1/edit

更新: すべてが表示された後、リンクを非表示にします

$('#show-hidden').click(function(event){
    event.preventDefault();

    $('#address-container .hidden:eq(0)').removeClass('hidden');

    if($('#address-container .hidden').length == 0){
        $(this).hide();
    }
});

これにより、 #address-container 内に隠しクラスを持つ要素があるかどうかがチェックされます。何も見つからない場合、.length は 0 になります。$(this) は #show-hidden リンクです。

于 2013-11-01T06:59:38.577 に答える