Question

我有两个动态创建的组件，我正在使用 onClick 函数来显示内容。我遇到的问题是在 onClick 事件期间，我的代码显示了所有内容。我正在寻找的是当我单击第一个组件的索引 1 时，我想显示第二个组件的索引 1 并隐藏其余部分，当我单击下一个索引时，我显示第二个组件的下一个索引。感谢任何帮助或建议以使其更好。

showContent(){
    const container = document.querySelector('ne-card-slider').shadowRoot;
    const wrapper = document.querySelector('ne-main-content').shadowRoot;
    const card = container.querySelectorAll<HTMLElement>('.anchor');
    const content = wrapper.querySelectorAll<HTMLElement>('.contentMain');
    //console.log(content);
    //console.log(card);
    //console.log(card[1].getAttribute('href'));
    //console.log(content[1].getAttribute('id'));
    for (let i = 0; i < card.length; i++){
      content[i].classList.remove('active');
      if (card[i].getAttribute('href') === content[i].getAttribute('id')) {
        content[i].classList.add('active');
      }
    }
    
  }

Answer 1

let cardCount = 0;
    showContent(){
        const container = document.querySelector('ne-card-slider').shadowRoot;
        const wrapper = document.querySelector('ne-main-content').shadowRoot;
        const card = container.querySelectorAll<HTMLElement>('.anchor');
        const content = wrapper.querySelectorAll<HTMLElement>('.contentMain');
if (cardCount === 0){ content[0].style.visibility = "visible"; cardCount++; } 
else { content[cardCount].style.visibility = "visible"; cardCount++; }
  }

单击功能显示/隐藏内容时出错

1 个答案: