Question

我在纸质对话框中的纸质项目中使用了Polymer core-icon

<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，当有人点击纸质项目时，我需要切换“expand-more”和“expand-less”之间的图标

Answer 1

好的我正在使用纸质图标按钮...我可以使用javascript更改图标属性。我假设任何具有icon =“”参数的元素都可以更新，因为属性更改将向下传递到其内部的封装的iron-icon元素。

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

在Polymer core-icon中更改图标

1 个答案: