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

Dynamically adding extra row into jquery accordion

本文关键字：添加 jquery 手风琴 动态      更新时间：2023-09-26

我想问一些如何动态控制手风琴的问题.

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

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

我的源代码如下。

.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（例如：手风琴 1、手风琴 2、手风琴 3）

然后单击

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

请帮帮我谢谢！

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

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

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

一种选择是使用 jquery 克隆来克隆元素，给克隆一个唯一的 id，然后附加它......有关示例，请参见此处

所以你会做这样的事情：

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

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

我想你想要这个

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