javascript - 当一组 polymer 纸张切换按钮中的一个被按下时触发事件

Question

我有一组 Polymer paper-toggle-buttons 可以使图形中的元素(使用 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 进行硬编码。

Answer 1

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

this.id