英文:
I want to simplify this javascript code. There are many children elements
问题
I was trying to make this menu,
when clicked first item,
menu pic 1
when clicked second item,
menu pic 2
i have created styles for class 'on' in style sheet.
colorItems = document.querySelector('#color').children[1]colorItems.children[0].addEventListener('click', () => {colorItems.children[0].classList.toggle('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.remove('on')})colorItems.children[1].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.toggle('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.remove('on')})colorItems.children[2].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.toggle('on')colorItems.children[3].classList.remove('on')})colorItems.children[3].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.toggle('on')})
英文:
I was trying to make this menu,
when clicked first item,
menu pic 1
when clicked second item,
menu pic 2
i have created styles for class 'on' in style sheet.
colorItems = document.querySelector('#color').children[1]colorItems.children[0].addEventListener('click', () => {colorItems.children[0].classList.toggle('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.remove('on')})colorItems.children[1].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.toggle('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.remove('on')})colorItems.children[2].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.toggle('on')colorItems.children[3].classList.remove('on')})colorItems.children[3].addEventListener('click', () => {colorItems.children[0].classList.remove('on')colorItems.children[1].classList.remove('on')colorItems.children[2].classList.remove('on')colorItems.children[3].classList.toggle('on')})
答案1
得分: 1
根据您的代码，这是一个解决方案：
#color 从我看来是您的 父 容器，它有 子元素，我们假设它们是按钮，您需要使用 querySelectorAll 选择子元素，并循环遍历它们，每当您点击一个 按钮 时，应该向 被点击的按钮 添加 .on CSS 类，并从其 兄弟元素 中移除此类，这里是一个可行的示例：
<!-- begin snippet: js hide: false console: true babel: false --><!-- language: lang-js -->let colorItems = document.querySelectorAll('#color button');colorItems.forEach(item => {item.addEventListener('click', () => {colorItems.forEach(i => i != item ? i.classList.remove('on') : i.classList.add('on'));});});<!-- language: lang-css -->.on {background-color: yellow;}<!-- language: lang-html --><div id="color"><button>red</button><button>blue</button><button>white</button><button>black</button></div><!-- end snippet -->
这段代码将为您实现所需的功能。
英文:
based on your code here is a solution:
#color as i see its your parent container and its has children lets assume they are buttons, you need to select the childrens using querySelectorAll and loop through them, whenever you click on a button you should add .on css class to the clicked button and remove this class from its siblings here is workable example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let colorItems = document.querySelectorAll('#color button');colorItems.forEach(item => {item.addEventListener('click', ()=> {colorItems.forEach(i => i != item ? i.classList.remove('on') : i.classList.add('on'));});});
<!-- language: lang-css -->
.on {background-color: yellow;}
<!-- language: lang-html -->
<div id="color"><button>red</button><button>blue</button><button>white</button><button>black</button></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论