Question

我有一个应用程序抽屉，我通过切换抽屉后出现的条目标签来设置动画。

但是，我无法让JS选择包含标签的所有元素。

我甚至试图给他们所有相同的ID并使用'querySelector'，'querySelectorAll'，'this。$。'和'这。$$。'

有人可以帮忙吗？

HTML

<paper-icon-item>
   <iron-icon icon="home" slot="item-icon"></iron-icon> <span id="spantext">Home</span>
</paper-icon-item>
<paper-icon-item>
   <iron-icon icon="done" slot="item-icon"></iron-icon> <span id="">Expert</span>
</paper-icon-item>
<paper-icon-item>
    <iron-icon icon="search" slot="item-icon"></iron-icon> <span id="">Search</span>
</paper-icon-item>
<paper-icon-item>
    <iron-icon icon="supervisor-account" slot="item-icon"></iron-icon> <span id="">Admin</span>
</paper-icon-item>
     <div class="flex"></div> <!-- THIS IS THE ONLY WAY THAT I COULD GET THE LAST ENTRY TO BE FLEXED TO THE BOTTOM -->
 <paper-icon-item>
     <iron-icon icon="settings" slot="item-icon"></iron-icon> <span id="">Settings</span>
 </paper-icon-item>

JS

toggleMenu : function() {
        var menu = this.$.drawer;
        var avatar = this.$.avatar;
        var userData = this.$.userDetails;
        var spanText = this.$.spantext; /* THIS IS WHERE I AM GETTING STUCK */

        menu.classList.toggle('drawerExpand');
        avatar.classList.toggle('userAvatarResize');
        userData.classList.toggle('userDetailsReveal');
        spanText.classList.toggle('revealSpan');
      }

Answer 1

您是否尝试过querySelectorAll('paper-icon-item iron-icon ~ span')？

querySelector用于所有相同类型 - Polymer

1 个答案: