javascript - 如何根据元素的属性将纸质列表框中的某些元素设为一种颜色，将其他元素设为另一种颜色？

Question

我有一个带有 dom-repeat 模板的 paper-listbox，列表框中的每个元素都是一个 paper-item，就像这样:

<paper-listbox class="dropdown-content">
    <template is="dom-repeat" items="{{myList}}">
        <paper-item value="{{item.name}}">{{item.name}}</paper-item>
    </template>
</paper-listbox>

每个元素都有一个属性，我们称之为isValid。我想做的是如果 isValid === true 然后将相应 paper-item 元素的背景颜色设置为白色(无论如何，所以可能什么都没有在这种情况下需要这样做)，如果isValid === false，则将相应的paper-item元素的背景颜色设置为浅蓝色。

在 .js 文件中，我用每个元素填充一个数组，然后将该数组设置为 myList:

var i, len, item, items;
items = [];
for (i=0, len = results.length; i<len; i++) {
    item = results[i];
    items.push(_this.formatItem(item)); // formatItem initializes the item object so it
    // has things like item.name and item.isValid
}
_this.set("myList", items);

抱歉，如果有任何 javascript 看起来很奇怪——我用 coffeescript 编写它并复制了编译后的 javascript 代码。我刚开始使用 Polymer 和 HTML/CSS/Javascript，所以我不确定在哪里设置颜色。我认为最让我困惑的是我想更改的元素在 paper-listbox 的 dom-repeat 模板中，所以我不知道如何处理。

Answer 1

我认为您正在寻找的是具有值的 CSS 属性选择器。

参见 here

所以在你的情况下会是:

paper-item[isValid="true"] {
    background: white;
}

paper-item[isValid="false"] {
    background: lightblue;
}

这是一个fiddle .

或者只创建 1 种样式并将默认设置为白色。