javascript - 在特定元素上切换特定类别 - polymer

Question

我有一系列 paper-input 元素，每个元素都有一个 iron-icon，该图标最初是隐藏的，直到输入文本等。

<paper-input id="one" class="one" on-input="doFunction">
    <iron-icon suffix icon="clear" id="clearOne" class="clear"></iron-icon>
</paper-input>
<paper-input id="two" class="two" on-input="doFunction">
    <iron-icon suffix icon="clear" id="clearTwo" class="clear"></iron-icon>
</paper-input>

有什么方法可以使用 JS 来实现这一点吗？

我目前有以下 JS:

doFunction : function(e) {
    if (e.currentTarget.value != '') {
        /* toggle the clear icon for that input only */
    } else {
        /* toggle the clear icon for that input only again */
}

Answer 1

您也可以使用 CSS(而不是 JavaScript)来完成此操作，使用 <iron-icon>.hidden自动设置为 true 的属性仅当 <paper-input>.value属性为空:

<paper-input value="{{value1}}">
  <iron-icon hidden$="[[!value1]]"></iron-icon>
</paper-input>

确保初始化绑定(bind)属性，以便 <iron-icon>.hidden属性的绑定(bind)在附件时进行评估:

Polymer({
  // ...
  properties: {
    value1: {
      type: String,
      value: ''  // initialize for data binding
    }
  }
});

Polymer 1 demo

Polymer 2 demo