ASP.NET C＃JQueryUI如何在动态创建的用户控件中保存手风琴索引？

Question

ASP.NET C＃JQueryUI如何在动态创建的用户控件中保存手风琴索引？

我在用户控件中有一个JQueryUI手风琴，该控件是从aspx主页面动态创建n次（基于ComboBox中选择的数字）的n次。 我一直在使用以下javascript代码保存在aspx主页面中出现一次的手风琴索引，每个手风琴控件都有一次：

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内部的这种方法使用了相同的方法，这种方法可能会发生很多次，并且也有效，但是保存的索引始终是第一手风琴中的索引，其余索引之间是共享的。 因此，如果我在手风琴1中具有索引2，在手风琴2中具有索引1，并且控件导致回发，则在回发之后，手风琴1和手风琴2都将在索引2处于活动状态时出现。

如何修改上面的代码以使动态创建的手风琴彼此独立工作？

Answer 1

您应该将$("#accordion1").accordion更改$(".acc").accordion 。 .acc是此示例的手风琴类。 您使用了$("#accordion1") ，它可以与活动的accordion1一起使用。

编辑

单击每个手风琴时，您需要将活动的手风琴保存在一个数组中（ accordionsActivate ），并且要获取此数组，请将数组存储在隐藏字段（ HFaccordions ）中，如下所示：

<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>

在线演示（小提琴）