ASP.NET C＃JQueryUIどのように動的に作成されたユーザーコントロールのアコーディオンのインデックスを保存するには？

Question

ASP.NET C＃JQueryUI動的に作成されたユーザーコントロールで、accordionのインデックスを保存する方法はありますか

メインのaspxページからn回（ComboBox内の選択した番号に基づいて）n回ダイナミックに作成されるユーザーコントロール内にJQueryUIアコーディオンがあります。 私はメインのaspxページに一度起こるアコーディオンのインデックスを保存するには、次のJavaScriptコードを使用している、私はかつてアコーディオンコントロールごとにこれを持っている：

var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>"); 
var activeAccordion1 = 0; 
if (activeAccordion1Item) { 
    activeAccordion1 = parseInt(activeAccordion1Item.value); 
} 
$("#accordion1").accordion({ 
    collapsible: true, 
    heightStyle: "content", 
    active: activeAccordion1, 
    activate: function (event, ui) { 
     var i = $("#accordion1").accordion("option", "active"); 
     var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>"); 
     activeAccordion1Item.value = i; 
    } 
}); 

とのaspxファイル内：

<asp:HiddenField ID="HFaccordion1" runat="server" Value="0" /> 

私はuser_controlの中で何度も起こる可能性のあるこの同じアプローチを使用しましたが、それも機能しますが、保存されたインデックスは常に最初のアコーディオンからのものであり、残りは共有されます。 したがって、accordion1にインデックス2、accordion2にインデックス1があり、コントロールがポストバックを引き起こした場合、ポストバック後に、accordion1とaccordion2の両方がインデックス2をアクティブにして表示されます。

ダイナミックに作成されたアコーディオンに対して、互いに独立して機能するように、上記のコードを変更するにはどうすればよいですか？

Answer 1

$("#accordion1").accordionを$(".acc").accordionに変更する必要があります。 .accは、この例のアコーディオンのクラスです。 $("#accordion1")を使用しましたが、これはアクティブなaccordion1で機能しました。

編集

このような各アコーディオンにし、この配列を取得するための際にクリックし、隠しフィールドに格納する配列（HFaccordions）あなたは、配列（accordionsActivate）でアクティブなアコーディオンを保存する必要があります。

<script> 
    var accordionsActivate = []; 
    $(document).ready(function() { 

     var $accordions = $(".acc").accordion({ 
      collapsible: true 
       , active: false 
       , icons: false 

     }).on('click', function() { 
      if ($.inArray($(this).attr('id'), accordionsActivate) < 0) { 
       accordionsActivate.push($(this).attr('id')); 
       $('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join()); 
      } 
      else { 
       accordionsActivate.splice($.inArray($(this).attr('id'), accordionsActivate), 1); 
       $('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join()); 
      } 

     }); 

     activeAccodions(); // Active accodions after postback 
    }); 

    function activeAccodions() { 
     if ($('#<%=this.HFaccordions.ClientID%>').val() === "") 
      return; 
     activeAccardions = $('#<%=this.HFaccordions.ClientID%>').val().split(','); 
     for (var i = 0; i < activeAccardions.length; i++) { 
      accordionsActivate.push(activeAccardions[i]); 
     } 
     for (var i = 0; i < accordionsActivate.length; i++) { 
      $('#' + accordionsActivate[i]).accordion("option", "active", 0); 
     } 
    } 

</script> 

Online demo (fiddle)