javascript - 我如何动态更改 jquery ui Accordion 的内容选项卡

Question

我有下一个代码:

<div id="accordion">
    <h3>Row 1</h3>
    <div id="1"></div>
    <h3>Row 2</h3>
    <div id="2"></div>
    <h3>Row 3</h3>
    <div id="3"></div>
</div>

$("#accordion").accordion({
    autoHeight: false,
    clearStyle: true,
    active: 0,
    change: function(event, ui) {
    $("div#2").append('<p>Test</p>');
    }
});

当在另一行中单击 Accordion 时，我想填充 <div id="2">与数据。在更改事件中，我正在尝试这样做:

$("div #2").append('<p>Test</p>');

但是文本“Test”打印在 h3 内而不是 div 中...我怎样才能实现在 div 上打印文本？？？

我使用的是jquery 1.9.0

这似乎是一个错误 http://bugs.jqueryui.com/ticket/4469#comment:4不是吗？

Answer 1

您必须重做为 id 设置的值属性。尝试:

<div id="accordion">
    <h3 id="header1">Row 1</h3>
    <div id="content1"></div>
    <h3 id="header2">Row 2</h3>
    <div id="content2"></div>
    <h3 id="header3">Row 3</h3>
    <div id="content3"></div>
</div>

这样，您就可以轻松定位:

$("#content2").append('<p>Test</p>');

(或实际使用 .append() )

这是因为id属性必须是唯一的，以便定位您实际想要的元素。 jQuery 将使用 native document.getElementById方法将返回第一个找到的元素 id .

更新:

根据您的新编辑，您需要使用不带空格的选择器:

$("div#2").append('<p>Test</p>');

尽管您不需要包含 div选择器的一部分。只需使用:

$("#2").append('<p>Test</p>');

虽然 HTML5 确实允许 id以数字开头(且长度为 1 个字符)，我建议使用更具描述性的 id ，就像我之前说的:“content1”等。

更新2:

再看一遍，$("div #2")实际上应该也可以工作，因为带有 id 的元素“2”位于 <div> 中。所以从技术上讲，选择器应该可以工作。尽管如此，我仍然建议使用一个非数字且更具描述性的选择器。

通过您的代码，我无论如何都可以使用更具描述性的选择器:http://jsfiddle.net/BrRPz/2/