Javascript Polymer 1.0无法访问嵌套元素中的元素

我正在使用Polymer 1.0，我正在构建一个小型手风琴示例。我有数据绑定到手风琴文本好，我只想改变图标的手风琴当我点击它

下面是我的代码

<dom-module id="ab-accordion">
  <template>
    <iron-ajax              
      auto
      handle-as="json"
      on-response="handleResponse"
      debounce-duration="300"
      id="ajaxreq"></iron-ajax>

    <template is="dom-repeat" id="accordion" items="{{items}}" as="item">
      <div class="accordion"  on-click="toggleParentAcc">
        <div id="accordion_header" class="accordion__header is-collapsed">
          <i class="icon icon--chevron-down"></i>
          <span>{{item.name}}</span>
        </div>
        <div id="standard_accordion_body" class="accordion__body can-collapse">
          <div class="accordion__content">
            <content id="content"></content>
          </div>
        </div>
      </div>
    </template>
  </template>   
  <script>
    Polymer({
      is: "ab-accordion",
      //Properties for the Element
      properties: {
        accordian: Object,
        childaccordions: Object,
        // Param passed in from the element - Set if the accordion is open by default.
        open: String,
        data: String,
        reqUrl: {
          type: String,
          value: "https://example.com/service.aspx"
        },
      },
      ready: function () {
        this.items = [];
      },
      attached: function () {
        // Run once the element is attached to the DOM.
      },
      toggleParentAcc: function (event) { // Toggle the classes of the accordions
        //This is where I want to toggle the  class
        this.$.accordion_header.classList.toggle('is-collapsed');
        if (typeof event !== 'undefined') {
          event.stopPropagation(); // Stop the click from going up to the parent.
        }
      },
      handleResponse: function (e) {
        this.items = e.detail.response.sports;
      }
    });
  </script>
</dom-module>

如何访问dom repeat中的元素

更新：我甚至无法访问附加函数中的元素

attached: function(){
 this.$.accordion_header // This is null?!
 this.$$('#accordion_header'); // this is also null!
} 

---

看起来您可能遇到了事件重定目标，当事件在DOM树上冒泡时会发生这种情况。了解更多

当我遇到这个问题时，我使用以下方法解决了它：

var bar = Polymer.dom(event).path[2].getAttribute('data-foo');

在我的聚合物功能里面

attached: function(){
 this.$.accordion_header // This is null?!
 this.$$('#accordion_header'); // this is also null!
} 

要在您的案例中找到它，您应该转到控制台并搜索DOM树/事件日志以找到您的目标。如果您在定位控制台的正确区域时遇到问题，请发表评论，我可能会进一步提供帮助

注意：使用数据绑定动态创建的节点，包括dom repeat和dom（如果未将模板添加到this.$hash中）中的节点。哈希仅包括静态创建的本地DOM节点，即元素最外层模板中定义的节点

<template id="accord_template" is="dom-repeat" items="{{items}}" as="item">
        <ab-accordion-row id="[[item.id]]" name="[[item.name]]" open="[[item.open]]">
        </ab-accordion-row>
    </template>

---

我想如果你用Polymer.domthis.root代替会更好。我还建议您不要在dom repeat中使用静态id，因为它们是唯一的。改用类。

我最终找到了一种不用在嵌套模板中选择元素的方法

<template id="accord_template" is="dom-repeat" items="{{items}}" as="item">
        <ab-accordion-row id="[[item.id]]" name="[[item.name]]" open="[[item.open]]">
        </ab-accordion-row>
    </template>

ab accordion是另一个元素，我只需向它提供数据，然后就可以根据参数更改类

    <div id="accordion" class="accordion" on-click="toggleAccordion">
        <div  class$="{{getClassAccordionHeader(open)}}">
            <i class="icon icon--chevron-down"></i>
            <span>{{name}}</span>
        </div>
        <div id="standard_accordion_body" class$="{{getClassAccordionChild(open)}}">
            <div class="accordion__content">
                <content></content>
            </div>
        </div>
    </div>

试试这个

toggleParentAcc: function (event) { // Toggle the classes of the accordions
    //This is where I want to toggle the  class
    var header = event.target.parentElement;
    Polymer.dom(header).classList.toggle('is-collapsed');
    // rest of your code
  }

---

仅供参考-我删除了ajax调用的URL只是为了防止API受到攻击。您找到查询本地DOM的解决方案了吗？谢谢您的回答，尽管我甚至无法访问附加函数中的元素。我想传入一个param Open，如果是真的，我想默认打开手风琴。在这里，我需要将id为accordion_头的div作为目标，并更改它的类。请参阅上面更新的代码，并查看我的附加功能。