为聚合物元素添加一个类答案

【问题标题】：Add a class to polymer element为聚合物元素添加一个类
【发布时间】：2014-04-22 20:59:02
【问题描述】：

每次选中我的模板中的复选框时，我都想向我的聚合物元素添加一个类或更改聚合物元素的属性。

由于我的元素使用label for 属性，所以我在标记中实例化元素时将复选框的 ID 绑定到

<label for="{{uniqueid}}" on-tap="{{toggle}}" />
  <input type="checkbox" id="{{uniqueid}}" class="select" checked="{{checker}}">
  <img src="{{image}}" alt="" class="prod-img">
  <div class="grid-details">
    <span>{{designer}}</span>
    <span>{{product}}</span>
    <span>{{currency}} {{price}}</span>
    <span>Shipped from {{info}}</span>
  </div>
</label>

然后我会像这样调用元素

<gmselect-element uniqueid="four" image="http://i.imgur.com/fkq1QKq.jpg" designer="CUCARELIQUIA" product="Castellano Suede Bag Redder" info="Gijon, Spain" price="650" currency="$"></gmselect-element>

我的切换功能如下所示

toggle: function() {
    this.$.grid.setAttribute("class", "grid true");
    this.setAttribute("selected", "true");
  }

但是，我不想在此处将其设置为 true，而是要检查复选框的选中属性的值。由于 ID 不是静态的，我无法使用 $ 功能获取元素。我也不知道如何转义绑定在胡子中的数据以在方法中获取其值。

【问题讨论】：

谢谢埃里克。为了清楚起见，我添加了更多细节。

标签： polymer

【解决方案1】：

this.$.grid.classList.add('classname')

this.$.grid.classList.remove('classname')

【讨论】：

简单地为旧浏览器编写 classList.add 或 remove() 存在一些支持问题。只是提醒那些可能遇到此问题的人。

【解决方案2】：

您已将checked 值绑定到{{checker}}，因此您应该能够在toggle 函数中仅引用this.checker。

如果需要，还可以从事件中获取模型数据。见：

https://www.polymer-project.org/1.0/docs/devguide/data-binding

【讨论】：

谢谢它的工作。我不知道你可以使用this 属性来引用它