点击访问 dom-repeat 元素的 CSS 类

Question

我的dom重复显示一个我可以添加书签或unbookmark的图标列表，我称其为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。

  _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重复，是否有其他方法，以便可以在_tooglebookmark（）函数中更改该DOM重复元素的CSS时？还是可以在_tooglebookmark（e）函数中使用索引？或使用" e"参考！

Answer 1

不确定我是否正确理解 - 您想访问要利用的元素？

然后只使用event.target属性。它将返回事件发生的元素，在这种情况下，您可以攻入您所拍摄的图标。

_toogleBookMark = function(e) {
e.target.classList.toggle("not-book-marked");

}

检查此示例。

请注意：

1）当使用Shady Dom时，假设我们的元素是自定义元素，则目标可以是元素模板的组成部分，而不是元素本身。为了防止这种情况，请使用polymer.dom（e）.localtarget（在此处阅读更多）。

2）当将自定义元素与轻子儿童一起使用时，上述可能还不够，您的（本地）目标将是一个轻子孩子，而不是您想要的元素。在这种情况下，请使用element.closest（selector）到（选项）将DOM升至所需的元素。在此处阅读有关方法的更多信息。

Answer 2

您只想在点击上交换班级，这样做：

添加自己的属性，例如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函数中，您可以访问当前的点击元素，并通过：

交换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');
    }
},