如何解决单击功能显示/隐藏内容时出错
我有两个动态创建的组件,我正在使用 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');
}
}
}
解决方法
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++; }
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。