Question

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（）的不那么冗长的方式。

然后再说一遍，也许追加会是更好的路线？

非常感谢任何帮助。

Answer 1

试试这个，

$('.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
});

Demo

Answer 2

是的，你是对的。您可以在选择器中使用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. $（此）是#show-hidden链接。

Answer 3

$(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 .....并且显示从j计算的id的div的内容，而其他是隐藏的。

Demo

使用单个按钮 - jQuery一次显示下一个div的一个

3 个答案: