Question

以下代码正常工作，但它是硬编码的。我希望能够创建一个字段集数组，隐藏这些字段，然后每次单击“＃createEventForm-eventInformation-addElement”按钮时，它会显示下一个字段。下面代码的问题在于它是硬编码的，因此容易破坏并且比使用循环大得多。有人可以帮助我做得更好。

$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      if($("#fieldset-group1").is(":hidden"))
      {
          $("#fieldset-group1").show();
      }
      else
      {
          $("#fieldset-group2").show();
      }


   }
);

Answer 1

一个快速的想法。

为每个字段集添加一个类，让我们说“hiddenfields”。声明一个全局变量以跟踪显示的字段。

  $(".hiddenfields").hide();//hide all
  var num = 0;//none shown

  $("#createEventForm-eventInformation-addElement").click( 
     function() { 
         ajaxAddEventInformation();
         num++;
         $("#fieldset-group" + num).show();
     }
  );

Answer 2

您应该使用jquery选择器的 ^ = 表示法，这意味着以开头..

// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide();

然后

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      // find the visible one (current)
      var current = $('[id^="fieldset-group"]:visible');
      // find its index
      var index = $('[id^="fieldset-group"]').index( current ); 
      // hide the current one
      current.hide(); 
      // show the next one
      $('[id^="fieldset-group"]').eq(index+1).show(); 
   }
);

Answer 3

这是一个简单的解决方案。

var index = 0;
var fieldsets = [
        $("#fieldset-group1").show(),
        $("#fieldset-group2"),
        $("#fieldset-group3"),
        $("#fieldset-group4"),
        $("#fieldset-group5"),
        $("#fieldset-group6"),
        $("#fieldset-group7"),
        $("#fieldset-group8"),
        $("#fieldset-group9")   
    ];    

$("#createEventForm-eventInformation-addElement").click(function() { 
    ajaxAddEventInformation();              
    fieldsets[index++].hide();
    if (index < fieldsets.length) {
        fieldsets[index].show();  
    }
    else {
        index = 0;
        fieldsets[index].show(); 
    }
});

Answer 4

将类'fieldset'添加到所有字段集，然后：

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      $('.fieldset').is(':visible')
          .next().show().end()
          .hide();
   }
);

Answer 5

如何为该字段添加（或仅使用）类？

$(".fieldset").hide(); // hides every element with class fieldset

$("#createEventForm-eventInformation-addElement").click( function() { 
    ajaxAddEventInformation();
    // I assume that all fieldset elements are in one container #parentdiv
    // gets the first of all remaining hidden fieldsets and shows it
    $('#parentdiv').find('.fieldsset:hidden:first').show(); 

});

Answer 6

这将显示第一个隐藏的fieldset元素，其ID属性以“fieldset-group”开头...

$("fieldset[id^='fieldset-group']:hidden:first").show();

循环javascript改进

6 个答案: