Question

我第一次使用jQuery UI手风琴，我想我在这里缺少一些东西。我写了以下代码：

    <div id="theAccordion">
        <h2><a href="#">Header1</a></h2>
        <div>old content 1</div>
        <h2><a href="#">Header2</a></h2>
        <div>old content 2</div>
        <h2><a href="#">Header3</a></h2>
        <div>old content 3</div>
        <h2><a href="#">Header4</a></h2>
        <div>old content 4</div>
        <h2><a href="#">Header5</a></h2>
        <div>old content 5</div>
    </div>
<script type="text/javascript">
    var map = {
        Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); },
        Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); },
        Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); },
        Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); },
        Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); }
    };
    function accordionChange(event, ui) {
        ui.newContent.empty();
        eval("map." + ui.newHeader.text() + "(ui.newContent)");
    }
    $(function() {
        $("#theAccordion").accordion({
            change: function(event, ui) { accordionChange(event, ui); }
        });
    });
</script>

代码按预期工作，它会触发map函数，但没有代码附加到accordion内容，因为newContent对象似乎一直是空的。我用IE8调试工具调试它，jqObj.length为零所以没有对newcontent进行任何更改。你知道这里发生了什么吗？

提前致谢

Answer 1

找到了解决方案！

在内容中添加段落解决了问题，因此代码更改为

<div id="theAccordion">
    <h2><a href="#">Header1</a></h2>
    <div><p>old content 1</p></div>
    <h2><a href="#">Header2</a></h2>
    <div><p>old content 2</p></div>
    <h2><a href="#">Header3</a></h2>
    <div><p>old content 3</p></div>
    <h2><a href="#">Header4</a></h2> 
    <div><p>old content 4</p></div>
    <h2><a href="#">Header5</a></h2>
    <div><p>old content 5</p></div>
</div>

感谢大家的帮助

Answer 2

实际上 - 你遇到了麻烦，因为手风琴小部件中有一个错误。我刚才做了一个补丁：http://dev.jqueryui.com/ticket/4469#comment:4

Answer 3

它可能与绑定有关，但我不确定。您是否尝试将实际功能代码放入手风琴初始化中。请注意，我还将append（）更改为html（），因为您的原始内容未包含在p中。

var map = {
    Header1: function(jqObj) { jqObj.html("new content 1"); },
    Header2: function(jqObj) { jqObj.html("new content 2"); },
    Header3: function(jqObj) { jqObj.html("new content 3"); },
    Header4: function(jqObj) { jqObj.html("new content 4"); },
    Header5: function(jqObj) { jqObj.html("new content 5"); }
};

$(function() {
    $("#theAccordion").accordion({
        change: function(event, ui) {
            ui.newContent.empty();
            eval( "map." + ui.newHeader.text() + "(ui.newContent)");
        }
    });
})

Answer 4

可能是因为你在使用之前把它清空了吗？即：

ui.newContent.empty();
eval( "map." + ui.newHeader.text() + "(ui.newContent)");

尝试将accordionChange回调替换为：

function accordionChange(event, ui) {
    var text = ui.newContent.text();
    ui.newContent.empty();
    eval("map." + ui.newHeader.text() + "(text)");
}

jquery手风琴改变事件缺少newContent

4 个答案: