Hàm div chuyển đổi trong javascript đơn giản
Tôi đã viết một mã kích hoạt div của tôi với một menu khác. Tôi không biết cái nào tốt hơn và nên được sử dụng. Tôi có thể nhận được một số phản hồi?
Mã đầu tiên trong một chức năng:
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";
}
}
Mã thứ hai với hai chức năng nhưng hoạt động giống nhau:
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";
}
Trả lời
Tôi nghĩ rằng điều đó dễ dàng hơn để viết và hiểu sự thay đổi trạng thái nếu bạn không cần phải suy nghĩ về các trường hợp cạnh.
Trong trường hợp đầu tiên, bạn đã bắt đầu ở trạng thái bạn muốn và chỉ cần đảo ngược cả hai trạng thái. Trong cách thứ hai, bạn chỉ cần "tắt" mọi trạng thái và "bật" trạng thái mà bạn muốn.
Tôi nghĩ điều đó đơn giản hơn nếu bạn nghĩ theo cách này.
Hai thanh bên
Tôi nghĩ rằng bạn có thể sử dụng 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>
Tài liệu:
- DOMTokenList
- Element.classList
- DOMTokenList.forEach ()
Nhiều hơn hai thanh bên
Có thể chuyển đổi không thể hữu ích trong trường hợp này. Tuy nhiên, tôi nghĩ rằng bộ dữ liệu có thể giúp
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>
Nếu tôi phải chọn giữa 2 phương pháp của bạn, tôi sẽ chọn phương pháp thứ hai.
Bạn nên luôn hiểu rõ về khía cạnh dễ đọc và cả Nguyên tắc trách nhiệm đơn lẻ .
Nhưng nếu tôi đề xuất một giải pháp thay thế cho mã gốc của bạn, tôi sẽ đề xuất sử dụng các lớp 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>
Phương pháp này về cơ bản sử dụng các lớp CSS như một loại trạng thái liên tục, giúp đơn giản hóa logic JS của bạn và cũng giảm sự lặp lại mã của bạn (giữ cho nó KHÔ ) VÀ nó có thể tái sử dụng vô hạn cho bao nhiêu menu tùy thích! :)
Điểm cộng khác là giờ đây bạn có thể chọn mở bất kỳ menu nào trong menu của mình theo mặc định và áp dụng nhiều hoạt ảnh hiệu quả hơn trong CSS.
Hy vọng điều này sẽ giúp.