Question

我有一个名为<collapse-item>的Polymer元素，当它打开时会获得一个属性opened。（collapse-item基于iron-collapse）但是，如果打开此元素，我如何检查JS，然后将另一个css类分配给它的父元素？

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}}></collapse-item>
  </div>
</template>

我只想为这个<div class="parent">的一个实例分配一个新的css类，而不是为页面上的所有其他实例分配。

编辑选项1

我已更改上述内容以添加对已打开项目的检查并添加了一些js：

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="[[_toggleId]]">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}"></collapse-item>
  </div>
</template>

JS：

  properties: {

  _toggleId: {
      type: String,
      computed: '_computeToggleId(opened)'
    }

  },
  _computeToggleId: function(opened) {
      return opened ? 'expandeditem' : '';
  }

这不仅为父类的这一次实例创建了id，而且在dom-repeat中创建了所有这些。

编辑选项2

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="parentElem">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}" on-tap="_computeToggleId(opened)"></collapse-item>
  </div>
</template>

JS：

  _computeToggleId: function(opened) {
    if (opened) {
      this.$.parentElem.classList.add('expandeditem');
    }

无法读取classList的{{1}}。

感谢您帮助我学习。我是Polymer的新手。

Answer 1

您可以将属性绑定到已打开的属性。这是铁崩的例子

<iron-collapse opened={{isOpen}}>
  <div class="parent" id="parentElem">
   <div>Content goes here...</div>
  </div>
</iron-collapse>

然后你可以检查条件if（isOpen）是true还是false，基于父元素的更改CSS类。将id分配给父元素，并添加或删除ID为

的类名

      this.$.parentElem.classList.remove('YOUR_CSS_CLASS_NAME');
      this.$.parentElem.classList.add('YOUR_CSS_CLASS_NAME');

聚合物检查元素是否打开＆amp;将css类分配给父级

1 个答案: