0

对 jQuery 非常陌生，请多多包涵。我有一个带有重复字段集的表单，我想在用户单击一个按钮时一次显示一个。这是基本布局：

<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，但我试图完成一次显示一个，如果需要，用户再次单击以添加另一个嵌套表单字段集。我意识到我可以添加更多按钮并附加到每个 id，然后在单击它们后隐藏它们，但似乎应该使用 next() 和/或 eq() 以一种不那么冗长的方式。

再说一次，也许附加会是更好的路线？

任何帮助是极大的赞赏。

4

3 回答 3

0 
$(function(){
var i = 0;
$("#show-hidden").click(function(ev){
ev.preventDefault();

var j = (i%3)+ 1;


$("#previous-address-"+j).removeClass('hidden');

$("#address-container").find("div").not(document.getElementById("previous-address-"+j)).addClass('hidden');

i++;
});


});

这里我声明了一个全局变量i=0。每次单击链接时j，1 2 和 3 之间的循环值（例如 1、2、3、1、2、3 ......

演示

于 2013-11-01T07:40:12.510 回答
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 回答