JQuery UI гармошка: не понимаю, как обновить контент

Question

JQuery UI гармошка: не понимаю, как обновить контент

0

У меня простой аккордеон с двумя разделами. Нажав кнопку, я хотел бы вставить текст в раздел, который в данный момент активирован. Мои исследования продолжают предполагать, что я нахожу активную панель, используя:

 var active = $(".selector").accordion("option", "active");

Я знаю, что.selector - это класс, но откуда он исходит, и почему я не вижу его в своем отладчике Chrome? Почему бы не $ ("# accordion").

Предполагая, что это правильно, почему я не могу просто добавить

в текущей области?

active.append("<p>test</p>").accordion('destroy').accordion();

Полный код:

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>

        $(function () {
            $("#accordion").accordion();
        });

        $(document).ready(function () {

            $("#addBeer").click(function () {
                var active = $(".selector").accordion("option", "active");
                active.append("<p>test</p>").accordion('destroy').accordion();

            });
        });
    </script>
</head>

<body>
    <div>

        <input id="addBeer" type="button" name="addBeer" value="Beer">
    </div>

    <div id="accordion">
        <h3>Section 1</h3>
        <div>
            <p>
                Paragraph 3
            </p>
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
        <h3>Section 4</h3>
        <div>
            <p>
                Paragraph 4</p>

        </div>
    </div>
</body>

</html>

user2077000 15 апр. 2014, в 17:21

Источник

Теги:

javascript

jquery

jquery-ui

jquery-ui-accordion

1 ответ

Ещё вопросы

Derple · Answer 1 · 2014-04-15T12-45-00.000Z

Лучший способ от того, что я написал раньше.

РЕДАКТИРОВАНИЕ

JSfiddle: http://jsfiddle.net/fS6zT/

$( "#insert" ).click( function() { //inserts text to active panel
       var changetothis = $( "#something" ).val();

        n = $("#accordion h3").index($("#accordion h3.ui-state-active"));
         // alert(n); // test active number
        var section = n+1;
        $("#"+section).html(changetothis);
    });

В скрипке есть прокомментированная функция, которая содержит некоторые дополнительные элементы, которые можно использовать для этого, но они не нужны. Функция без комментирования, показанная выше, - это все, что вам нужно.

Хммм, это, кажется, не работает для меня. В вашем примере, почему .selector меняется с класса на объект?
@ user2077000 Эй, извини, у меня больше не было времени на исправление. Я исправил ответ с рабочим jsfiddle, иллюстрирующим лучший способ сделать это (imo). Дайте мне знать, если вам нужна помощь с этим.