Динамически добавляя дополнительную строку в JQuery аккордеоне

0

Я хотел бы задать вопрос, как управлять аккордеоном динамически.

при нажатии кнопки "Добавить" я должен добавить еще один дополнительный аккорд аккорда и нажать кнопку "Удалить", чтобы удалить последнюю строку аккордеона.

то у меня есть вопрос, как контролировать это.

Мой исходный код, как показано ниже.

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>

Когда я нажимаю кнопку "Добавить", динамически добавляю еще один столбец и увеличиваю поддерево аккордеона (пример: accordian1, accordian2, accordian3)

и нажмите кнопку "Удалить", а затем удалите последнюю строку.

Пожалуйста, помогите мне поблагодарить вас!

  • 0
    Можете ли вы опубликовать то, что вы пытались?
  • 0
    Извините, у меня пока нет смысла ставить изображение. Я просто хочу нажать кнопку Добавить или Удалить и добавить больше аккордеона, как div id
Теги:

2 ответа

0
Лучший ответ

Если я правильно вас понимаю, из вашего комментария к предыдущему ответу, что у вас возникли проблемы с кодом, созданным бритвой, например:

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

Очевидно, что, поскольку этот код является серверной, вам нужно решение на стороне клиента.

Один из вариантов - использовать клон jquery для клонирования элемента, дать клону уникальный идентификатор, а затем добавить его... см. Здесь пример

поэтому вы бы сделали что-то вроде:

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

Это совершенно непроверено, но, надеюсь, укажет вам в правильном направлении. Я жестко закодировал новый идентификатор как "id1", но, очевидно, вам нужно будет определить, каким должен быть идентификатор нового элемента.

Поделиться
  • 0
    Привет, Большое спасибо за ваш ответ, вы точно понимаете мою точку зрения, это модель MVC. Я постараюсь обработать модель сбоку после финиша. Я уже следую тому, чем ты руководствуешься. и после того, как я нажму кнопку «Добавить», он создаст больше аккордеона. однако внутри нет содержимого (даже если щелкнуть мышью, ничего не происходит), у вас есть идеи по этому поводу? благодарю вас !
  • 0
    выглядит как отключить .. если я открываю аккордеон для оригинала и нажимаю добавить, то это тот же клон, но я не могу ничего сделать, как отключить
Показать ещё 5 комментариев
0

Я думаю, вы хотите этого

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('#accordionSub').append(newDiv)
    $('#accordionSub').accordion("refresh");        
});
Поделиться
  • 0
    но мне нужно поставить <div id = "accordionSub"> <h3> <a href="#" class="editor-label"> @ Html.LabelFor (model => model.Resolution), как это, но вы ошиблись знаете, как вставить в newDiv с @ Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню