Javascript 多个熨斗塌陷不工作,仅首先膨胀

Javascript 多个熨斗塌陷不工作,仅首先膨胀,javascript,jquery,polymer,collapse,expander,Javascript,Jquery,Polymer,Collapse,Expander,我正在尝试创建多个包含内容的iron collapse元素。我希望当用户单击按钮时,熨斗折叠会展开。问题是我不能让每个元素单独展开。脚本只捕获第一个元素,不影响其他元素。我尝试了很多代码示例,但都没有成功。有人能帮我吗?我的代码如下: var expandContent=document.getElementById('mybutton'); expandContent.onclick=函数(事件){ var moreInfo=document.getElementById('moreInfo

我正在尝试创建多个包含内容的iron collapse元素。我希望当用户单击按钮时,熨斗折叠会展开。问题是我不能让每个元素单独展开。脚本只捕获第一个元素,不影响其他元素。我尝试了很多代码示例,但都没有成功。有人能帮我吗?我的代码如下:

var expandContent=document.getElementById('mybutton');
expandContent.onclick=函数(事件){
var moreInfo=document.getElementById('moreInfo');
var iconButton=Polymer.dom(event.localTarget);
iconButton.icon=moreInfo.opened?“硬件:键盘向下箭头”
:“硬件:键盘向上箭头”;
/*toggle();*//*此选项适用于,不知道哪个更好*/
event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
};

主要文本
次要文本
第二项
第三项
问题在于:

var expandContent = document.getElementById('mybutton');
为什么要在整个文档中查找“mybutton”?你不需要这样做,因为聚合物封装了每个组件,所以你可以在多种情况下使用它
正如赛义德所说:

Polymer在其本地DOM中自动构建静态创建的实例节点的映射,以提供对常用节点的方便访问,而无需手动查询它们。元素模板中使用id指定的任何节点都存储在this.$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));
更新 好的,我在阅读了一些论坛和js文档后找到了合适的解决方案,我会把它写下来,也许有人也需要它。
var elems=document.getElementsByClassName('mybutton');//获取具有相同类名的所有按钮
对于(var i=0;i}
是的,我理解,但我没有使用或标记,而且(这个.$)没有在js功能之外工作。因此类似(this.$.mybutton.onclick)或(var expandCollapse=this.$.mybutton)的代码将不起作用。“脚本只捕获第一个元素,不影响其他元素”发生这种情况是因为您使用document.get.elementbyid引用,您需要找到另一种方法将每个expandContextChanged getElementById引用到GetElementsByCassName,因此现在看起来像(var expandContent=document.GetElementsByCassName('mybutton');),但现在遇到了另一个问题。在编写onclick函数时,需要添加[]方括号并定义索引(如0 1 e.t.c),但如果我不放方括号,函数将不起作用,单击会抛出错误。这里是否有解决方法,因为我发现元素id必须是唯一的,并且我的代码对于多个对象不正确。