切換特定的類特定元件上 - 聚合物

我有一系列各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 */ 
}

來源

2017-08-04 physicsboy

嘗試這種方式！

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

來源

2017-08-04 16:06:10

正是我需要的帕斯卡爾。我忘記提及我正在爲清晰的圖標設置動畫，正如我在上面向託尼提及的那樣，是否稍微改動了一下代碼以添加和刪除另一個CSS類，而不是刪除另一個CSS類，然後刪除並添加實際的圖標類。再次感謝 – physicsboy

你可以交替使用CSS（沒有的JavaScript）做到這一點，只有當<paper-input>.value屬性爲空使用<iron-icon>.hidden屬性被自動設置爲true：

<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

來源

2017-08-04 21:06:52 tony19

感謝Tony的意見。我正在考慮使用JS方式，因爲我想讓「清晰」圖標以一種過渡而不是僅僅出現。 – physicsboy

好的。這也可以使用CSS和屬性綁定來完成，但是最適合你的是什麼。 :-) – tony19

切換特定的類特定元件上 - 聚合物

回答

相關問題