Question

我的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）函数!!

Answer 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的更多信息。

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函数中，您可以访问当前的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');
    }
},

随时访问dom-repeat元素的CSS类

2 个答案: