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的{{1}}属性：

<paper-input>.value

确保初始化绑定属性，以便在附加时评估<paper-input value="{{value1}}"> <iron-icon hidden$="[[!value1]]"></iron-icon> </paper-input>属性的绑定：

<iron-icon>.hidden

Polymer 2 demo

Answer 2

以这种方式试试！

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')
    }
}

切换特定元素的特定类 - 聚合物

2 个答案: