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[ "..." ]。]

使用object literal创建Prototype库选项卡

1 个答案: