jQuery UI手风琴：不了解如何更新内容

Question

I have a simple accordion with two section. 我有一个简单的手风琴，有两个部分。 Upon clicking a button, I'd like to insert some text into the section that's currently activated. 单击按钮后，我想在当前激活的部分中插入一些文本。 My research keeps suggesting that I find the active pane using: 我的研究不断表明我使用以下方法找到活动窗格：

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

I know that .selector is a class but where does it come from and how come I don't see it in my Chrome debugger? 我知道.selector是一个类，但是它来自哪里，为什么我在Chrome调试器中看不到它？ Why wouldn't $("#accordion").accordion be appropriate here instead? 为什么$（“＃accordion”）。accordion在这里不合适呢？

Assuming that this is correct, how come I cannot simply append a 假设这是正确的，为什么我不能简单地附加一个

within the current pane? 在当前窗格中？

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

Full code: 完整代码：

<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>

Answer 1

A better way from what i wrote before. 比我以前写的更好的方法。

EDITED 已编辑

JSfiddle: http://jsfiddle.net/fS6zT/ 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);
    });

In the fiddle there is a commented function which contains some extra elements usable for this, but they aren't needed. 小提琴中有一个带注释的函数，其中包含一些可用于此目的的额外元素，但不是必需的。 The uncommented function thats shown above is all you require. 上面显示的未注释功能就是您所需要的。

jQuery UI手风琴：不了解如何更新内容

问题描述

1 个解决方案

解决方案1
0 2014-04-15 15:20:28

jQuery UI手风琴：不了解如何更新内容

问题描述

1 个解决方案

解决方案1 0 2014-04-15 15:20:28

解决方案1
0 2014-04-15 15:20:28