javascript/htmlDOM 显示元素同时隐藏其他元素

Question

所以我写了这个 clickDisplay 函数，它在点击时显示某些元素，它工作正常，是的，但显然我需要一个隐藏所有其他元素的功能，因为它们应该显示在同一个字段中, 所以现在他们有点堆叠在一起这是我想出的，但它有点不起作用，我不知道为什么

const pages = ['watch','chars','seasons','songs']

    function clickHide(element){
        document.getElementById(element).style.display = 'none';
    }

    function clickDisplay(element){
        document.getElementById(element).style.display = 'block';
        for(let x = 0 ; x < pages.length ; x++){
            if (pages[x]!=element){clickHide(pages[x]);}
        }
    }

Answer 1

哦等等，我不知道为什么，但现在突然可以用了。我只更改了占位符文本并刷新了页面

但我确信这仍然是一个愚蠢的解决方案

Answer 2

虽然听起来你自己解决了问题，但我在你发布之前就开始整理代码了，所以我会把它放在这里给你。 :)

const pages = ['watch', 'chars', 'seasons', 'songs']

function clickHide (el) {
  pages.forEach((pel) => {
    setElement(pel, pel === el ? 'none' : 'block')
  })
}

function setElement(el, attr) {
  document.getElementById(el).style.display = attr
}

与 html 有这个：

onclick="clickHide('watch')"  // or 'chars' 'seasons' or 'songs'

javascript/htmlDOM 显示元素同时隐藏其他元素

javascript/htmlDOM display element while hiding the others

javascript

simple-html-dom