循环通过javascript改进答案

【问题标题】：Loop through javascript improvement循环通过javascript改进
【发布时间】：2010-01-25 19:47:29
【问题描述】：

下面的代码可以正常工作，但它是硬编码的。我希望能够创建一个字段集数组，隐藏这些字段，然后每次单击“#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();
      }


   }
);

【问题讨论】：

如果显示“下一个”，其他的应该仍然可见还是应该再次隐藏？

标签： javascript jquery html

【解决方案1】：

您应该使用 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(); 
   }
);

【讨论】：

盖比这很接近我想要的。在第一部分（Jquery 行），我必须删除空格。但它的工作原理不是这样:)

【解决方案2】：

一个快速的想法。

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

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

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

【讨论】：

【解决方案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(); 
    }
});

【讨论】：

【解决方案4】：

为所有字段集添加一个类'fieldset'，然后：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

});

【讨论】：