我的dom repeat显示了一个我可以加入书签或取消标记的图标列表,这些图标生成dom-repeat我调用一个函数来查找该图标是否已加入书签,这将返回CSS类
.book-marked {
color: red;
}
.not-book-marked {
color: green;
}
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark"></iron-icon>
</template>
如果用户点击该图标我现在可以获得我的所有图标列表,我需要使用toogle css class.so我写了点击功能
_toogleBookMark:function(e) {
var userData = e.model.item; //gets entire data object of that element
var index = e.model.index; //gets index of that element
},
我不能使用ID,因为它的dom-repeat,还有其他方法可以让我在点击时改变_toogleBookMark()函数中dom-repeat元素的CSS吗?或者是否可以用索引改变CSS或使用&#34; e&#34;参考_toogleBookMark(e)函数!!
答案 0 :(得分:1)
不确定我是否理解正确 - 您想要访问您点击过的元素吗?
然后使用event.target属性。它将返回事件发生的元素,在这种情况下,是您点击的图标。
_toogleBookMark = function(e) {
e.target.classList.toggle("not-book-marked");
}
选中example。
提醒你:
1)当使用Shady DOM时,假设我们的元素是一个自定义元素,target可以是元素模板中的一个组件,而不是元素本身。为了防止这种情况,请使用Polymer.dom(e).localTarget(阅读更多here)。
2)当使用带有轻DOM子元素的自定义元素时,上面的可能是不够的,你的(本地)目标将是一个轻的DOM子项,而不是你想要的元素。在这种情况下,使用Element.closest(selector)(可选)将DOM上移到您想要的元素。阅读有关方法here的更多信息。
答案 1 :(得分:0)
由于您只想轻松更换课程,请按以下方式进行操作:
添加自己的属性,例如data-id="1"
和id
属性,但请确保它们具有相同的值:
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark" data-id="{{item.userId}}" id="{{item.userId}}"></iron-icon>
</template>
现在,在_toggleBookMark
函数中,您可以访问当前的tapped元素并通过以下方式交换CSS类:
_toogleBookMark:function(e) {
// this gives you your userId from the data-id attribute
var userId = e.path[0].dataId;
// we can access the element now with
var element = this.$$('#' + e.path[0].dataId);
if (element.classList.contains('book-marked')) {
element.classList.remove('book-marked');
element.classList.add('not-book-marked');
} else {
element.classList.add('book-marked');
element.classList.remove('not-book-marked');
}
},