将额外的行动态添加到 jquery 手风琴中

Question

我想对如何动态控制手风琴有一些疑问。

当单击添加按钮时，我应该再添加一行子手风琴和 单击删除按钮将删除手风琴的最后一行。

然后我有一个问题如何控制它。

我的源代码如下。

JS：

$("#addResolution").click(function (e) {
    alert("Add new resolution. ");
});

$("#removeResolution").click(function (e) {
    alert("Remove new resolution. ");
});


                <h3><a href="#" class="editor-label">
                    @Html.LabelFor(model => model.Resolution)
                </a></h3>
                <div>
                    <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="addResolution">
                        <span class="ui-button-text">ADD</span>
                    </button>
                    <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="removeResolution">
                        <span class="ui-button-text">DEL</span>
                    </button>
                    <div id="accordionSub">
                        <h3><a href="#" class="editor-label">
                             @Html.LabelFor(model => model.Resolution)
                        </a></h3>
                        <div class="editor-field">    
                            @Html.EditorFor(model => model.Resolution,
                            new
                            {
                                style = "width:" + 100 + "%; height:" + 5 + "em;"
                            }) 
                            @Html.ValidationMessageFor(model => model.Resolution)

                            <br />
                            <label id="lblFileUploadResolution">Choose Image File</label>
                            <input type="file" name="uploadFile" id="fileToUploadResolution" style="width:89%;" accept="image/png, image/gif, image/jpeg, image/bmp" />
                            <input type="button" id="btnFileUploadResolution" value="Upload" style="width:10%;" />
                        </div>
                    </div>
                </div>

当我点击添加按钮时，动态添加一列并增加手风琴子 ID（例如：accordian1、accordian2、accordian3）

然后点击删除按钮，然后删除最后一行。

请帮帮我，谢谢！

Answer 1

如果我理解正确，从您对上一个答案的评论看来，您在使用 razor 生成的代码时遇到问题，例如：

@Html.LabelFor(model => model.Resolution)

显然，由于该代码是服务器端的，因此您需要客户端解决方案。

一种选择是使用 jquery clone 来克隆元素，给克隆一个唯一的 id 然后追加它...see here for an example

所以你会做这样的事情：

var clone = $('#accordionSub').clone();
clone.attr('id', 'id1').insertAfter($('#accordionSub'));

这完全未经测试，但希望能为您指明正确的方向。我已将新 id 硬编码为“id1”，但显然您需要计算出新元素的 id 应该是什么。

Answer 2

我想你想要这个

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('#accordionSub').append(newDiv)
    $('#accordionSub').accordion("refresh");        
});