Fungsi div beralih javascript sederhana
Saya telah menulis kode yang memicu div saya dengan menu lain. Saya tidak tahu mana yang lebih baik dan harus digunakan. Bisakah saya mendapatkan umpan balik?
Kode pertama dalam satu fungsi:
function sidebar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
var icon = document.getElementById('right');
menuSmall.style.display = "block";
menu.style.display = "none";
if(menu.style.display == "none") {
icon.onclick = function () {
menu.style.display = "block";
menuSmall.style.display = "none";
}
}
Kode kedua dengan dua fungsi tetapi melakukan pekerjaan yang sama:
function sidebar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "block";
menu.style.display = "none";
},
function openbar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "none";
menu.style.display = "block";
}
Jawaban
Saya pikir itu lebih mudah untuk menulis dan memahami perubahan status jika Anda tidak perlu memikirkan kasus edge.
Dalam kasus pertama, Anda sudah mulai dalam keadaan yang Anda inginkan dan hanya perlu membalikkan kedua keadaan tersebut. Yang kedua, Anda hanya perlu "mematikan" setiap status dan "mengaktifkan" yang Anda inginkan.
Saya pikir itu lebih sederhana jika Anda berpikir seperti ini.
Dua sidebar
Saya pikir Anda bisa menggunakan DOMTokenList.toggle () :
const sidebars = document.querySelectorAll('.sidebar');
const icon = document.getElementById('icon');
const toggle = el => el.classList.toggle('hidden');
icon.addEventListener('click',() => sidebars.forEach(toggle));
/* the display value of a div is block by default */
.hidden {
display: none;
}
<!-- you don't need to find which sidebar is open in your js -->
<div class="sidebar">first</div>
<div class="sidebar hidden">second</div>
<span id="icon">icon</span>
Dokumen:
- DOMTokenList
- Element.classList
- DOMTokenList.forEach ()
Lebih dari dua sidebar
Mungkin toggle tidak dapat berguna dalam kasus ini. Namun, saya pikir kumpulan data mungkin membantu
const sidebars = document.querySelectorAll('.sidebar');
const btns = document.querySelectorAll('.btn');
const getSidebar = btn => btn.dataset.sidebar;
const hide = el => el.classList.add('hidden');
btns.forEach(btn =>
btn.addEventListener('click', () => {
const target = document.getElementById(getSidebar(btn));
sidebars.forEach(hide);
target.classList.remove('hidden');
})
);
.hidden {
display: none;
}
<div class="sidebar" id="first">sidebar 1</div>
<div class="sidebar hidden" id="second">sidebar 2</div>
<div class="sidebar hidden" id="third">sidebar 3</div>
<button class="btn" data-sidebar="first">1</button>
<button class="btn" data-sidebar="second">2</button>
<button class="btn" data-sidebar="third">3</button>
Jika saya harus memilih di antara 2 metode Anda, saya akan menggunakan metode kedua.
Anda harus selalu berbuat salah di sisi keterbacaan dan juga Prinsip Tanggung Jawab Tunggal .
Tetapi jika saya menyarankan alternatif untuk kode asli Anda, saya akan mengusulkan penggunaan kelas CSS.
function toggleMenu(selectedMenu) {
// Grab the currently open menu
var openMenu = document.querySelector('.js-menu-open');
// Grab the menu you want to open
var targetMenu = document.querySelector(selectedMenu);
// Scenario 1: a menu is already open
// Close the open menu.
if(openMenu) {
openMenu.classList.replace('js-menu-open', 'js-menu-closed');
}
// Secnario 2: if the menu you are trying to open isn't the currently open menu
// Open the target menu.
if(openMenu !== targetMenu) {
targetMenu.classList.replace('js-menu-closed', 'js-menu-open');
}
}
.js-menu-closed {
display: none;
}
.js-menu-open {
display: block;
}
<div id="sidebar-container" class="js-menu-closed">
Sidebar 1
</div>
<div id="sidebar-container2" class="js-menu-closed">
Sidebar 2
</div>
<div id="sidebar-container3" class="js-menu-closed">
Sidebar 3
</div>
<button onclick="toggleMenu('#sidebar-container')">Toggle sidebar 1</button>
<button onclick="toggleMenu('#sidebar-container2')">Toggle Sidebar 2</button>
<button onclick="toggleMenu('#sidebar-container3')">Toggle sidebar 3</button>
Metode ini pada dasarnya menggunakan kelas CSS sebagai semacam status persisten, yang membantu menyederhanakan logika JS Anda, dan juga mengurangi pengulangan kode Anda (menjaganya tetap KERING ) DAN dapat digunakan kembali secara tak terbatas untuk menu sebanyak yang Anda inginkan! :)
Kelebihan lainnya adalah Anda sekarang dapat memilih untuk membuka salah satu menu Anda secara default, dan menerapkan lebih banyak animasi berperforma di CSS.
Semoga ini bisa membantu.