Polymer2.0- 使用类的多重铁塌陷答案

【问题标题】：Polymer2.0- Multiple Iron collapse using classPolymer2.0- 使用类的多重铁塌陷
【发布时间】：2018-06-20 01:42:52
【问题描述】：

我正在尝试使用 class 而不是 id 来实现多个铁塌陷

问题中提到的解决方案-Polymer Multiple Iron-Collapse 有效，但我有更多的铁塌陷，我不想为相同的功能创建重复的代码

我尝试了不同的选项，试图使用 class 而不是 id 来选择相应的元素

codepen-https://codepen.io/nagasai/pen/YxyqmE

HTML：

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-collapse/iron-collapse.html">
   <link rel="import" href="paper-input/paper-input.html">
</head>
<body>

  <x-foo attr="{{text}}"></x-foo>

  <dom-module id="x-foo">
    <template id="collapse1">


<button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
  <div>Enter text collapse1</div>
</iron-collapse>


<button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
  <div>Enter text collapse2</div>
</iron-collapse>


 <button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
  <div>Enter text collapse2</div>
</iron-collapse>

    </template>
  </dom-module>
</body>

JS：

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
       toggle() {
         console.log(this);
  this.$.querySelector('.collapse').toggle();
}

  }
  customElements.define(XFoo.is, XFoo);

【问题讨论】：

请检查这个。

标签： polymer-2.x polymer-2.0

【解决方案1】：

我建议你使用自定义属性。这是有效的解决方案：https://codepen.io/Sahero/pen/VzeWNd

HTML：

<head>
   <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
   <link rel="import" href="polymer/polymer.html">
   <link rel="import" href="iron-collapse/iron-collapse.html">
   <link rel="import" href="paper-input/paper-input.html">
</head>
<body>     
  <x-foo attr="{{text}}"></x-foo>

  <dom-module id="x-foo">
    <template>      
      <button on-click="toggle" my-attribute="collapse1">toggle 
      collapse</button>
      <iron-collapse id="collapse1" class="collapse">
        <div>Enter text collapse1</div>
      </iron-collapse>   

      <button on-click="toggle" my-attribute="collapse2">toggle 
      collapse</button>
      <iron-collapse id="collapse2" class="collapse">
      <div>Enter text collapse2</div>
      </iron-collapse>

      <button on-click="toggle" my-attribute="collapse3">toggle 
      collapse</button>
      <iron-collapse id="collapse3" class="collapse">
      <div>Enter text collapse3</div>
      </iron-collapse>

    </template>
  </dom-module>
</body>

JS：

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
   toggle(e) {
     //console.log(this);
     var id = e.target.getAttribute('my-attribute');
     console.log(id);
     this.shadowRoot.querySelector('#'+id).toggle();
     //this.shadowRoot.querySelector('.collapse').toggle();
  }

  }
  customElements.define(XFoo.is, XFoo);

【讨论】：

【解决方案2】：

为<dom-repeat> 项目实现此目的的一种方法是使用事件的currentTarget，以便您可以选择调用该方法的元素。我有一个示例，其中您有多个列表项 (paper-listbox)，当 iron-collapse 项展开时，右箭头图标变为向下箭头。在我的示例中，不需要任何课程，但您也可以轻松拥有 e.currentTarget.querySelector('.theClass')

例子：

<dom-repeat items={{list}}>
    <template>
        <paper-listbox on-click="toggle">
            <iron-icon id="icon" icon="icons:chevron-right"></iron-icon>
            <paper-item>{{item.title}}</paper-item>
            <iron-collapse class="collapse">
                <p>Content here . . . </p>
            </iron-collapse>
        </paper-listbox>
    </template>
</dom-repeat>

以及它下面的JS：

toggle(e) {
    // currentTarget selects the paper-listbox where the toggle method occurred.
    var collapseArea = e.currentTarget.querySelector('iron-collapse');
    var theIcon = e.currentTarget.querySelector('iron-icon');
    collapseArea.toggle();
    // toggle the icon for list item from right arrow to downward arrow
    (theIcon.getAttribute('icon') === 'icons:chevron-right') ? theIcon.setAttribute('icon', 'icons:expand-more') : theIcon.setAttribute('icon', 'icons:chevron-right');
}

【讨论】：