Javascript 在Polymer中，我可以使动态创建的纸张按钮在单击时改变颜色吗？

我正在尝试更改通过

元素动态创建的纸张按钮的颜色。假设我有一段代码：

<template is="dom-repeat" items="{{items}}" as="item">
  Itemnumber: [[item.number]] is [[item.height]].
  <paper-button on-click="setHigh">High</paper-button>
  <paper-button on-click="setLow">Low</paper-button>
</template>

Itemnumber:[[item.number]]是[[item.height]]。
高
低

现在，当我点击按钮“高”，例如，我希望该按钮的背景色改变，我希望“低”按钮的背景色也改变。数组项存储在本地，我可以使用以下代码执行类似的操作：

<template is="dom-repeat" items="{{items}}" as="item">
  Itemnumber [[item.number]] is [[item.height]].
  <template is="dom-if" if="[[isHigh(item)]]">
    <paper-button on-click="setHigh" class="active">High</paper-button>
    <paper-button on-click="setLow">Low</paper-button>
  </template>
  <template is="dom-if" if="[[!isHigh(item)]]">
    <paper-button on-click="setHigh">High</paper-button>
    <paper-button on-click="setLow" class="active">Low</paper-button>
  </template>
</template>

Itemnumber[[item.number]]是[[item.height]]。
高
低
高
低

---

现在，将isHigh（Item）返回为true的每个项都将是active类的一部分（我使用它来设置背景色的样式），而false将不属于该类。这在我第一次加载页面时起作用，但是当我按下按钮并且条目数组发生更改时，我必须首先重新加载页面才能使样式生效。属性item.height确实会立即更新。

我建议在两个按钮周围添加一个容器，在该容器上添加一个为按钮着色的类。使用css进行此操作对于应用程序来说要轻得多，因为按下按钮时不需要调用getHigh

<template is="dom-repeat" items="{{items}}" as="item">
  <div class="button-container">
  Itemnumber [[item.number]] is [[item.height]].
    <paper-button on-click="setHigh" class="high">High</paper-button>
    <paper-button on-click="setLow" class="low">Low</paper-button>
</div>
</template>

在css中：

.button-container .high {
  background-color: green;
}

.button-container .low {
  background-color: red;
}

/* When high is pressed */
.button-container.high .high {
  background-color: red;
}

.button-container.high .low {
  background-color: green;
}

.button-container .high {
  background-color: green;
}

.button-container .low {
  background-color: red;
}

/* When high is pressed */
.button-container.high .high {
  background-color: red;
}

.button-container.high .low {
  background-color: green;
}