在特定元素上切换特定 class - 聚合物

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

试试这个方法！

doFunction : function(e) {
    if (e.currentTarget.value != '') {
        Polymer.dom(e.currentTarget).querySelector('iron-icon').classList.remove('clear')
    } else {
        Polymer.dom(e.currentTarget).querySelector('iron-icon').classList.add('clear')
    }
}

Answer 2

您也可以使用 CSS（而不是 JavaScript）来完成此操作，使用仅当 [=14] 时自动设置为 true 的 <iron-icon>.hidden 属性=] 属性为空：

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

确保初始化绑定属性以便在附加时评估 <iron-icon>.hidden 属性的绑定：

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

Polymer 1 demo

Polymer 2 demo

在特定元素上切换特定 class - 聚合物

toggle specific class on specific element - Polymer

html

javascript

polymer