1

我的 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>

一旦我现在获得所有图标列表，如果用户单击该图标，我需要调整 css 类。所以我编写了点击功能

  _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”引用！

4

2 回答 2

1

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

只需使用 event.target 属性。它将返回事件发生的元素，在这种情况下，是您点击的图标。

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

}

检查这个例子。

提个醒：

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

2) 当使用带有轻量 DOM 子元素的自定义元素时，以上可能还不够，您的（本地）目标将是轻量 DOM 子元素，而不是您想要的元素。在这种情况下，使用 Element.closest(selector) 来（可选地）将 DOM 上升到您想要的元素。在此处阅读有关该方法的更多信息。

于 2016-12-24T15:03:32.320 回答
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函数中，您可以通过以下方式访问当前点击的元素并交换 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');
    }
},
于 2016-12-23T14:30:40.460 回答