当按下一组 Polymer 纸张切换按钮中的一个时触发事件答案

【问题标题】：Trigger an event when one of a set of Polymer paper-toggle-buttons is pushed当按下一组 Polymer 纸张切换按钮中的一个时触发事件
【发布时间】：2014-12-29 00:27:20
【问题描述】：

我有一组 Polymer 纸张切换按钮，可以使图形中的元素（使用 c3）出现和消失。我使用以下代码成功获取了事件更改：

HTML：

<div class="graph-sets-element">
    <core-label horizontal layout>
        <paper-toggle-button checked id="graph1"></paper-toggle-button>
        <h4>Graph 1</h4>
    </core-label>
</div>
<div class="graph-sets-element">
    <core-label horizontal layout>
        <paper-toggle-button checked id="graph2"></paper-toggle-button>
        <h4>Graph 2</h4>
    </core-label>
</div>

Javascript：

[].forEach.call(
    document.querySelectorAll('paper-toggle-button'), 
    function(toggle){
        toggle.addEventListener('change',function() {
            if(this.checked) {
                    chart.show('graph1');
            }
            else {
                chart.hide('graph1');
            }
        });
    }
);

我当前方法的问题是，任何按下纸张切换按钮都会做同样的事情（隐藏/显示绘制的 graph1 线）。有没有办法获取按下的纸张切换按钮的 id 并将其传递给 chart.show()

部分挑战在于这些切换按钮是在用户将新数据上传到图表时动态创建的。这意味着在按下纸张切换按钮之前我不一定知道他们的名字，并且不能硬编码每个人的 ID。

【问题讨论】：

你试过this.id吗？
是的，谢谢！

标签： javascript jquery html polymer

【解决方案1】：

您可以通过以下方式访问调用方元素 ID：

this.id

【讨论】：

【解决方案2】：

不久前我不得不做一些与此类似的事情，也许我使用的方法会对你有所帮助。

在您单击的元素上（在我的例子中是一个纸质项目）分配一个随机属性名称（我使用数据），以便我的元素看起来像。

<paper-toggle-button on-change="{{doFunction}}" id="{{id}}"></paper-toggle-button>

然后在我的功能中，我确保将发件人发送给它。看起来像

doFunction: function (event, detail, sender) {
  var id = sender.attributes.id.value;

  // do something with the id
}

使用事件侦听器有点不同但相似。它看起来像这样

toggle.addEventListener('change', function (event) {
  var id = event.path[0].id; 

  // do something with id
});

希望有帮助。

【讨论】：