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>

当我单击Add按钮时，动态添加一列并增加accordion sub id（例如：accordian1，accordian2，accordian3）

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

请帮帮我谢谢！

Answer 1

我想你想要这个

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

Answer 2

如果我理解正确的话，您对前一个答案的评论似乎表明您在使用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应该是什么。

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

2 个答案: