¡Hola, comunidad de StackOverflow!
Soy bastante nuevo en Stack y en la codificación en general, por lo que este código probablemente tendrá un error obvio que no puedo descifrar.
Básicamente, en el siguiente código quiero que se oculte todo lo que se muestra en la pantalla que no es el elemento con la settings de identificación.
if ((!"#settings").style.display === "block") { $(!"#settings").hide(); }HTML:
<body> <span id="mainBtnArea"> <button id="settings-btn">Settings</button> <button id="stats-btn">Stats</button> </span> <div id="mainArea"> <h1 id="clickHeader"></h1> <button id="main-btn">Click Me</button> </div> <div id="settings"> <h1>this is the page I want to show</h1> </div> <div id="stats"> <p id="stats-clicks" class="stats">Keys:</p> <p id="stats-keys" class="stats">Keys:</p> </div> </body>Los selectores de consultas no funcionan así: no se puede negar un selector con un ! símbolo.
Sin embargo, puede utilizar el selector visible y el selector no . Lo siguiente ocultará cada elemento que sea hijo del cuerpo ($("body.find"), sea un div o span (div, span), sea visible (:visible) y no tenga la id 'configuración' (:no('#configuraciones'))
$("body").find("div:not('#settings'), span").hide() var elements = document.getElementsByTagName('div'); for (var i = 0; i < elements.length; i++) { if (elements[i].id != 'settings') { elements[i].style.display = 'none'; } }¡Necesitas tener un forloop! Actualización: debe agregar una etiqueta de elemento DIV para que funcione. Por favor vea arriba.
Funciona para mí: https://jsfiddle.net/bowtiekreative/j697okqd/1/