javascript - 使用对象字面量创建原型(prototype)库选项卡

Question

我有这样的 HTML:

<dl>
    <dt class="tab-title">Title</dt>
    <dd class="tab-content">Ain't Life Grand</dd>
</dl>

JS 之后的最终 HTML 需要如下所示:

<dl>
    <dt class="tab-title">Title</dt>
    <dd class="tab-content">Ain't Life Grand</dd>
    <dt class="tab-title">Another Title</dt>
    <dd class="tab-content">Ain't Life Grand again</dd>
    <dt class="tab-title">How'about Another</dt>
    <dd class="tab-content">Ain't Life Grand last!</dd>
</dl>

我目前拥有的 JS 如下:

<script type="text/javascript">
    var arrayData = {
        titletwo: {
            title: 'Another Title',
            html: 'Ain\'t Life Grand again'
        },
        titlethree: {
            title: 'How\'about Another',
            html: 'Ain\'t Life Grand last!'
        }
    }
    for (var key in arrayData) {
        var obj = arrayData[key];
            $$('dl').insert('<dt class="tab-title">'.obj['title'].'</dt>');
        $$('dl').insert('<dd class="tab-content">'.obj['title'].'</dd>');
    }
</script>

它似乎没有做任何事情。请投稿!

Answer 1

你的方法很好，只是你做错了这两行:

$$('dl').insert('<dt class="tab-title">'.obj['title'].'</dt>');
$$('dl').insert('<dd class="tab-content">'.obj['title'].'</dd>');

因此我可以告诉您来自 PHP； . 不进行连接，使用 + 代替:

$$('dl').insert('<dt class="tab-title">' + obj['title'] + '</dt>');
$$('dl').insert('<dd class="tab-content">' + obj['title'] + '</dd>');

这不是错误，而是优先样式​​的简单问题，使用点运算符 . 从对象文字中查询键值对，如下所示(以下是等价的):

$$('dl').insert('<dt class="tab-title">' + obj.title + '</dt>');

[当您动态查询这些值时，请使用方括号 obj[ "..."]。]