按下一组聚合物纸张切换按钮之一时触发事件
Trigger an event when one of a set of Polymer paper-toggle-buttons is pushed
我有一组聚合物纸切换按钮,可以使图形中的元素(使用 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');
}
});
}
);
我当前方法的问题在于,任何按下纸张切换按钮都会做同样的事情(隐藏/显示绘制的图形1行)。有没有办法抓取按下的纸张切换按钮的 ID 并将其传递到 chart.show() 中
部分挑战在于,当用户将新数据上传到图形时,这些切换按钮是动态创建的。这意味着在按下纸张切换按钮之前,我不一定知道他们的名字,并且无法对每个人的 id 进行硬编码。
您可以使用以下命令访问调用方元素 id:
this.id
不久
前我不得不做一些接近这个的事情,也许我使用的方法会对你有所帮助。
在您正在单击的元素上(在我的例子中是纸质项目)分配一个随机属性名称(我使用了数据),以便我的元素看起来像。
<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
});
希望有帮助。
相关文章:
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使Javascript动态html表及其上的事件
- 使用类从一个标记中双击事件
- 如何在未直接触发的情况下停止事件
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 对iPad上的点击事件反应缓慢
- 事件和状态
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- 从控制器返回后Ajax启动事件激发
- 如何从画布上的某个移动事件中获取X和Y
- Jquery:未触发select事件
- JsFiddle上的鼠标事件不起作用
- 只覆盖箭头键滚动事件
- $window.ga在AngularJS事件中未定义
- cron作业与Javascript计时事件
- 按下一组聚合物纸张切换按钮之一时触发事件