Google 聚合物动态去除 class

Question

我已经有了这个模板

<app-drawer-layout>
  <!-- Drawer content -->
  <app-drawer transition-duration="500" swipe-open>
    <div style="width: 100%; height: 100%; position: relative;">
      <div style="height: 100%; width: 100%; overflow: auto;">
        <div id="head-of-drawer-space"></div>
        <div id="controls">
          <paper-button noink on-click="_pageLoader1">
            <div class="menu-item">Load Element 1</div>
          </paper-button>
          <paper-button noink on-click="_pageLoader2">
            <div class="menu-item active">Load Element 2</div>
          </paper-button>
          <paper-button noink on-click="_pageLoader3">
            <div class="menu-item">Load Element 3</div>
          </paper-button>
        </div>
      </div>
    </div>
  </app-drawer>
</app-drawer-layout>

我想在单击其他按钮之一时删除带有 'active' class 的元素，然后将 'active' class 添加到单击的按钮。

我该怎么办？

Answer 1

这是一个适用于 Polymer 元素的普通 Javascript 解决方案：

在 click 上为每个按钮添加一个事件处理程序；
在该回调中，对于每个 button，将 class 添加（或删除）到 div 内部（如果它对应（或不对应））。

示例：

//select all buttons
var buttons = controls.querySelectorAll( 'paper-button' )   

//attach event handlers
buttons.forEach( function ( button ) 
{
    button.onclick = toggle
} )

//add or remove class to every buttons
function toggle ()
{
    buttons.forEach( function ( button )
    {
        var cl = button.querySelector( 'div' ).classList
        if ( this == button )
            cl.add( 'active' )
        else
            cl.remove( 'active' )
    }, this )
}

你可以用箭头函数得到相同的结果：

//select all buttons
var buttons = controls.querySelectorAll( 'paper-button' ) 

//attach event handlers
buttons.forEach( b => b.onclick = function ()
{
  //add or remove class to every buttons
  buttons.forEach( b => b.querySelector( 'div' ).classList[ this==b ?"add":"remove"]( 'active' ) )
} )

div.active {
  color: red ;
}

<div id="controls">
 <paper-button noink on-click="_pageLoader1">
  <div class="menu-item">Load Element 1</div>
 </paper-button>
 <paper-button noink on-click="_pageLoader2">
  <div class="menu-item active">Load Element 2</div>
 </paper-button>
 <paper-button noink on-click="_pageLoader3">
  <div class="menu-item">Load Element 3</div>
 </paper-button>
</div>

Google 聚合物动态去除 class

Google Polymer dynamic removing class

polymer

web-component

paper-elements

custom-element