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>

在線演示（小提琴）