множественный схлопывание железа не работает, расширяется только сначала

Я пытаюсь создать несколько элементов Iron Collapse с содержимым внутри. Я хочу, чтобы железный коллапс расширялся, когда пользователь нажимал кнопку. Проблема в том, что я не могу развернуть каждый элемент отдельно. Скрипт ловит только первый элемент и не влияет на остальные. Я пробовал много примеров кода, но безуспешно. Кто-нибудь может мне помочь? Мой код ниже:

var expandContent = document.getElementById('mybutton');
    expandContent.onclick = function(event) {
      var moreInfo = document.getElementById('moreinfo');
      var iconButton = Polymer.dom(event).localTarget;
      iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                        : 'hardware:keyboard-arrow-up';
      
      /*moreInfo.toggle();*/ /* This one works to, don't know which is better */
      
      event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
    };
<paper-card style="width:100%;line-height:56px;font-size:16px;font-weight:400;">
  <paper-icon-button class="mybutton" id="mybutton" icon="hardware:keyboard-arrow-up" style="float:right;margin:8px;" >
  </paper-icon-button>
    <iron-icon icon="communication:forum"></iron-icon>
    <iron-collapse id="moreinfo" class="moreinfo" style="width:100%;">
      <paper-item>
        <iron-icon icon="info"></iron-icon>
        <paper-item-body two-line>
          <div>Primary text</div>
          <div secondary>Secondary text</div>
        </paper-item-body>
      </paper-item>
      <paper-item>Second item</paper-item>
      <paper-item>Third item</paper-item>
    </iron-collapse>
</paper-card>

Я хочу, чтобы только один коллапс расширялся после нажатия соответствующей кнопки. Есть ли способ изменить этот код, чтобы добиться того, что мне нужно, без полной перезаписи, потому что только с этим кодом iron-collapse работает правильно и меняет свой атрибут expand="yes/no", который я позже использую с файлами cookie?


javascript jquery collapse polymer expander
person nFox Inc    schedule 26.02.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема здесь:

var expandContent = document.getElementById('mybutton');

Почему вы ищете мою кнопку во всем документе? Вам не нужно этого делать, потому что Polymer инкапсулирует каждый компонент, поэтому вы можете использовать его в нескольких ситуациях.
Согласно документации ´s:

Polymer автоматически создает карту статически созданных узлов экземпляров в своей локальной модели DOM, чтобы обеспечить удобный доступ к часто используемым узлам без необходимости запрашивать их вручную. Любой узел, указанный в шаблоне элемента с идентификатором, хранится в хэше this.$ по идентификатору.

Итак, вам нужно изменить document.getElementById('mybutton') на this.$.mybutton, чтобы ссылаться на кнопку локального дома. По этому пути должно работать.

Редактировать

Используя свой код, а не делая это как следует в Polymer, возможно, это поможет вам: 

var idArray =["mybutton","mybutton2","mybutton3"];
idArray.forEach(function(item,index,array){
    var expandContent = document.getElementById(item);
    expandContent.onclick = function(event) {
    var moreInfo = document.getElementById('moreinfo');
    var iconButton = Polymer.dom(event).localTarget;
    iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                    : 'hardware:keyboard-arrow-up';
  
    /*moreInfo.toggle();*/ /* This one works to, don't know which is better */
  
    event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
};

}.bind(this));
person Flavio Ochoa    schedule 26.02.2016
comment
Да, я это понимаю, но я не использую теги ‹template› или ‹dom-module› и (this.$.) не работаю вне функции js. Таким образом, код вроде (this.$.mybutton.onclick) или (var expandCollapse = this.$.mybutton) не будет работать. - person nFox Inc; 27.02.2016
comment
Скрипт ловит только первый элемент и не влияет на остальные, это происходит потому, что вы ссылаетесь с помощью document.get.elementbyid, вам нужно найти другой способ ссылаться на каждый ExpandContext - person Flavio Ochoa; 27.02.2016
comment
Изменен getElementById на getElementsByClassName, теперь он выглядит так (var expandContent = document.getElementsByClassName('mybutton');), но теперь возникла другая проблема. При написании функции onclick необходимо добавить скобки [] и определить индекс (например, 0 1 и т. д.), но если я не поставлю эту функцию скобок, она не будет работать, а при нажатии выдает ошибку. Есть ли здесь обходной путь, потому что я нашел информацию о том, что идентификатор элемента ДОЛЖЕН быть уникальным, и мой код не был правильным для нескольких объектов. - person nFox Inc; 27.02.2016