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

Question

我的 dom 重复显示我可以添加书签或取消添加书签的图标列表，生成 dom-repeat 我调用一个函数来查找此图标是否已添加书签，这将 return CSS class

 .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>

一旦我现在获得所有图标列表，如果用户单击该图标，我需要切换 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？或者在 _toogleBookMark(e) 函数中使用 "e" 引用 !!

Answer 1

因为您只是想随时更换 class，请按以下步骤操作：

添加自己的属性，例如 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 classes：

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

Answer 2

不确定我是否理解正确 - 您想访问您点击的元素吗？

只需使用 event.target 属性即可。它将 return 事件发生的元素，在本例中为您点击的图标。

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

}

检查此 example。

注意：

1) 使用 Shady DOM 时，假设我们的元素是自定义元素，目标可以是元素模板中的组件，而不是元素本身。为防止这种情况，请使用 Polymer.dom(e).localTarget（阅读更多 here）。

2) 当使用带有 light DOM 子元素的自定义元素时，以上可能还不够，您的（本地）目标将是一个 light DOM 子元素，而不是您想要的元素.在这种情况下，使用 Element.closest(selector)（可选）将 DOM 提升到您想要的元素。阅读有关方法 here.

的更多信息

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

Access dom-repeat element's CSS class on tap

polymer

polymer-1.0

dom-repeat