Доступ к классу CSS класса dom-repeat на кране

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

Я не могу использовать идентификатор, так как его dom-repeat, Есть ли другие способы, чтобы я мог изменить CSS этого элемента dom-repeat в _toogleBookMark() fu nction при нажатии? или можно изменить CSS с индексом или использовать ссылку «e» в функции _toogleBookMark (e)!

Answer 1

Нет Если я правильно понял, вы хотите получить доступ к элементу, который вы использовали?

Просто используйте свойство event.target. Он вернет элемент, на котором произошло событие, в этом случае значок, который вы нажали.

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

}

Проверить это example.

Ум вам:

1) При использовании Shady DOM, предполагая, что наш элемент является пользовательский элемент, цель может быть компонентом из шаблона элемента, а не сам элемент. Чтобы этого избежать, используйте Polymer.dom (e) .localTarget (далее here).

2) При использовании пользовательского элемента со светлыми детьми DOM вышеуказанного может быть недостаточно, ваша (локальная) цель будет светлым дочерним элементом DOM, а не элементом, который вы хотите. В этом случае используйте Element.closest (селектор) для (необязательно) перехода 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 функции, вы можете получить доступ к текущим похлопали элементы и свопы классов 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'); 
    } 
},