簡體   English   中英

jQuery UI手風琴:不了解如何更新內容

[英]Jquery UI accordion: not understanding how to update content

我有一個簡單的手風琴,有兩個部分。 單擊按鈕后,我想在當前激活的部分中插入一些文本。 我的研究不斷表明我使用以下方法找到活動窗格:

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

我知道.selector是一個類,但是它來自哪里,為什么我在Chrome調試器中看不到它? 為什么$(“#accordion”)。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>

比我以前寫的更好的方法。

已編輯

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);
    });

小提琴中有一個帶注釋的函數,其中包含一些可用於此目的的額外元素,但不是必需的。 上面顯示的未注釋功能就是您所需要的。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM