javascript - 更改 polymer 核心图标中的图标

Question

我在纸张对话框中的纸张项目内使用 polymer 核心图标

<paper-dialog backdrop  id="sorting" heading="Sort by" transition="core-transition-bottom" >
               <core-menu selected="0" on-click="{{logTap}}" selectedItem="expand-more" id="mainMenu" >
                  <paper-item data-option="popularity">Popularity<core-icon   icon="expand-more"></core-icon> </paper-item>
                  <paper-item data-option="size">Size <core-icon   icon="expand-more"></core-icon>  </paper-item>
                  <paper-item data-option="price">Price <core-icon   icon="expand-more"></core-icon> </paper-item>
                </core-menu>
</paper-dialog>

Javascript

var menu = document.querySelector('core-menu');

   menu.addEventListener('click', function (e)
    {  
         var d = e.target.getAttribute('data-option');
         var dd = e.target.querySelector('core-icon');
         if(d){console.log(d);}
}); 

我遇到两个问题

1，当有人点击核心图标时，目标就是该元素

2，当有人点击纸质项目时，我需要在“展开更多”和“展开更少”之间切换图标

Answer 1

好的，我正在使用 paper-icon-button 并且...我可以使用 javascript 更改图标属性。我认为任何具有 icon=""参数的元素都可以更新，因此属性更改将流向其中封装的 Iron-icon 元素。

document.getElementById('yourID').onclick = function() {
    this.icon = 'more-horiz';
}