JavaScript показать / скрыть элементы HTML
Есть ли более чистый способ добиться этого в JavaScript, Я пытаюсь показать / скрыть элементы на основе функции щелчка
var overview = document.getElementById("overview");
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");
function btnOverview_Click() {
schedule.style.display = "none";
reports.style.display = "none";
overview.style.display = "block";
}
function btnSchedule_Click() {
overview.style.display = "none";
reports.style.display = "none";
schedule.style.display = "block";
}
function btnReports_Click() {
overview.style.display = "none";
schedule.style.display = "none";
reports.style.display = "block";
}
«Есть ли более чистый способ добиться этого», если вы просто хотите показать / скрыть некоторые элементы, я бы сказал «нет». Но если у вас есть доступ к html и вы хотите добиться функциональности табуляции или аккордеона, тогда - да. Вы можете сделать код более универсальным, используя классы и атрибуты данных.
Вы хотите другой способ, например, не изменять свойство отображения или хотите, чтобы код делал то же самое?
Лучше код, чтобы сделать то же самое - возможно, я ошибаюсь, но это кажется очень "раздутым" решением. Все элементы находятся на одном «уровне» - я не хочу получать к ним доступ с помощью их селектора - их позиция, идентификатор, класс могут измениться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это не совсем чисто, но, по крайней мере, позволяет сэкономить несколько строк кода.
Передайте this (элемент, который запускает функцию) вашей функции и установите для всех элементов значение display: none;, но установите для элемента, который был нажат, обратно значение display: block;.
var overview = document.getElementById("overview");
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");
function hide(element) {
overview.style.display = "none";
schedule.style.display = "none";
reports.style.display = "none";
element.style.display = "block";
}<div id = "overview" style = "width: 100px; height: 15px; background-color: green" onclick = "hide(this)"></div>
<div id = "schedule" style = "width: 100px; height: 15px; background-color: yellow" onclick = "hide(this)"></div>
<div id = "reports" style = "width: 100px; height: 15px; background-color: blue" onclick = "hide(this)"></div>Ага! Все эти встроенные стили и скрипты!…
@TakitIsy Действительно. :п
@TakitIsy +1 за ваш ответ, он намного лучше моего. Икс)
Спасибо, я ценю! :)
@EdwardDoyle Я думаю, вы не прокомментировали правильный ответ…;) CodeF0x, извините, что украл у вас «правильный ответ»!
Отказ от всех возможных встроенных стилей и JavaScript,
Предлагаю вам сделать следующее:
// I added a class in your HTML
var elements = document.querySelectorAll(".myClass");
var buttons = document.querySelectorAll(".myButtons");
// Function to hide all "elements" except the one we clicked
function hideExceptThis() {
elements.forEach(elm => elm.style.display = "none");
// Get the value in "data" attribute
var id = this.getAttribute("data"); // "this" refers to the one you clicked
document.querySelector(id).style.display = "block";
}
// On load, bind the above function on click for each element
buttons.forEach(but => but.addEventListener("click", hideExceptThis));#panel {
border-bottom: 1px solid gray;
background: #eee;
padding: 8px;
}
.myClass {
width: 240px;
height: 40px;
margin: 8px;
padding: 8px;
}
#overview { background-color: #fdd; }
#schedule { background-color: #dfd; }
#reports { background-color: #ddf; }<div id = "panel">
<button class = "myButtons" data = "#overview">Only overview</button>
<button class = "myButtons" data = "#schedule">Only schedule</button>
<button class = "myButtons" data = "#reports">Only reports</button>
</div>
<div class = "myClass" id = "overview">Overview</div>
<div class = "myClass" id = "schedule">Schedule</div>
<div class = "myClass" id = "reports">Reports</div>Надеюсь, поможет.
Думаю, абсолютно лучше. А чтобы сделать его на 100% идеальным, используйте elements.forEach(e=>e.style.display = "none") и elements.forEach(e=>e.addEventListener("click", hideExceptThis)).
@Attersson Спасибо за предложение, я заменил .getElementsByClassName() на .querySelectorAll(), чтобы можно было его применить.
@Attersson, используя .getElementsByClassName(), говорит: elements.forEach is not a function. stackoverflow.com/questions/24266313/…
Не имеет смысла, поскольку это массив (woops. HTMLCollection). возможно [].forEach.apply(e=>{e.style.display = "none";}, elements)
Вышеупомянутое скрывает «кнопку» (нажатый элемент) - я пытаюсь скрыть следующее: var overview = document.getElementById («overview»); var schedule = document.getElementById ("расписание"); var reports = document.getElementById ("отчеты");
кнопки находятся за пределами элементов - подумайте о плавающей боковой панели - да, я подумал, что больше html поможет - :)
Пожалуйста, покажите немного разметки HTML - способ вложения элементов может помочь