Question

我正在尝试创建多个含有内容的铁塌陷元素。当用户点击按钮时，我希望铁塌缩。问题是我无法单独扩展每个元素。该脚本仅捕获第一个元素，不会影响其他元素。我尝试了很多代码示例但没有成功。有人能帮我吗？我的代码如下：

init slow_pointer = head
init fast_pointer = head
repeat
   fast_pointer = fast_pointer->next;
   if fast_pointer == NULL
      break;
   fast_pointer = fast_pointer->next;
   if fast_pointer == NULL
      break;
   slow_pointer = slow_pointer->next;
until false
// slow_pointer now points at the middle node

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();
    };

我想在按下相应按钮后只展开一次折叠。有没有办法改变这个代码来实现我需要的，没有完全重写，因为只有这个代码铁崩溃正常工作并更改其属性expanded =“是/否”，我后来使用cookie？

Answer 1

问题在于：

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

为什么要在整个文档中查找“mybutton”？您不需要这样做，因为Polymer封装了每个组件，因此您可以在多种情况下使用它。
正如documentation所说：

Polymer在其本地DOM中自动构建静态创建的实例节点的映射，以便方便地访问常用节点，而无需手动查询它们。在元素模板中使用id指定的任何节点都存储在此。$ hash by id。
中

因此，您需要将document.getElementById('mybutton')更改为this.$.mybutton以引用本地dom按钮。这样，应该工作。

修改

使用您的代码而不是在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));

Answer 2

<强>更新好的，我在阅读了一些论坛和js文档后找到了正确的解决方案，我会把它写下来，也许有人也需要它。

＆＃13;

 var elems = document.getElementsByClassName('mybutton'); // Getting all button with same class name
for(var i = 0; i < elems.length; i++) { // Adding count indexes to buttons starting from first is 0       
    elems[i].onclick = function(event){ //And here is function to do expand/collapse, it can be any other function too, main idea was to get work/trigger all items with same class
        var expandContent = event.currentTarget.parentElement.querySelector('iron-collapse');
        var iButton = Polymer.dom(event).localTarget;
        iButton.icon = expandContent.opened ? 'hardware:keyboard-arrow-down' : 'hardware:keyboard-arrow-up';
        event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
        console.log("Works ! Great !!!");
    }
}

＆＃13;

多次铁塌不工作，只是先扩大

2 个答案:

修改