Question

我有一个关于切换的问题。我需要切换一个迭代的编辑按钮。一旦单击编辑按钮，将显示7个组件（默认情况下为隐藏），具体取决于与sectionVisible匹配的buttonId。

使用sectionsVisible数组来按顺序切换与buttonId匹配的部分。

JavaScript：

toggleVisibility: function(component, event, helper) {
  let sectionsVisible = [];
  const buttonId = event.getSource().get("v.buttonId");
  console.log("buttonId: "+buttonId);
  const index = sectionsVisible.indexOf("profile-edit-section");
  console.log("index: "+index);
}

按钮代码：

<aura:iteration items="{!v.personalProfileDetails}" var="personalDetail" indexVar="index">
               <div>
                    <c:wsButton variant="base"
                    smallButton="true"
                    label="{!$Label.c.edit}"
                    title="{!$Label.c.edit}"
                    iconName="utility:edit"
                    iconPosition="left"
                    buttonClickEvent="{!c.toggleVisibility}"
                    buttonId="{!index}"
                    />
                </div>

部分：

<section id="profile-edit-section" class="{!'profile-edit-section' + if(v.isSectionVisible, ' slds-show', ' slds-hide') }">
<div>
    <c:primaryEmail />
</div>

<div>
    <c:password />   
</div>

<div>
    <c:name />
</div>

<div>
    <c:mobile />
</div>

<!-- Address -->
<div>
    <c:details />
</div>

<div>
   <c:address />
</div>

<div>
    <c:preference />
</div>

控制台：

buttonId：0 1 2 3 4 5 6 指数：-1 -1 -1 -1 -1 -1 -1

如何使用JavaScript切换HTML中的元素数组

0 个答案: