ฟังก์ชันสลับจาวาสคริปต์อย่างง่าย div
ฉันได้เขียนโค้ดที่เรียกใช้ div ของฉันด้วยเมนูอื่น ไม่ทราบว่าตัวไหนดีกว่ากันและควรใช้ ฉันขอคำติชมได้ไหม
รหัสแรกในฟังก์ชันเดียว:
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";
}
}
รหัสที่สองที่มีสองฟังก์ชัน แต่ทำงานเหมือนกัน:
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";
}
คำตอบ
ฉันคิดว่ามันง่ายกว่าที่จะเขียนและทำความเข้าใจกับการเปลี่ยนแปลงสถานะหากคุณไม่จำเป็นต้องคิดถึงกรณีขอบ
ในกรณีแรกคุณเริ่มต้นในสถานะที่คุณต้องการแล้วและจำเป็นต้องสลับทั้งสองสถานะเท่านั้น ประการที่สองคุณเพียงแค่ต้อง "ปิด" ทุกสถานะและ "เปิด" สถานะที่คุณต้องการ
ฉันคิดว่ามันง่ายกว่าถ้าคุณคิดแบบนี้
สองแถบด้านข้าง
ฉันคิดว่าคุณสามารถใช้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>
เอกสาร:
- DOMTokenList
- Element.classList
- DOMTokenList.forEach ()
แถบด้านข้างมากกว่าสองแถบ
บางทีการสลับอาจไม่มีประโยชน์ในกรณีนี้ อย่างไรก็ตามฉันคิดว่าชุดข้อมูลอาจช่วยได้
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>
ถ้าฉันต้องเลือกระหว่าง 2 วิธีของคุณฉันจะใช้วิธีที่สอง
คุณควรทำผิดในด้านความสามารถในการอ่านและหลักการความรับผิดชอบเดียว
แต่ถ้าฉันจะแนะนำทางเลือกให้กับโค้ดดั้งเดิมของคุณฉันขอเสนอการใช้คลาส 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>
วิธีนี้ใช้คลาส CSS เป็นสถานะถาวรซึ่งช่วยลดความซับซ้อนของตรรกะ JS ของคุณและยังช่วยลดการทำโค้ดซ้ำ (ทำให้แห้ง ) และสามารถใช้ซ้ำได้ไม่ จำกัด สำหรับเมนูต่างๆเท่าที่คุณต้องการ! :)
ข้อดีอื่น ๆ คือตอนนี้คุณสามารถเลือกที่จะเปิดเมนูใดเมนูหนึ่งตามค่าเริ่มต้นและใช้ภาพเคลื่อนไหวที่มีประสิทธิภาพมากขึ้นใน CSS
หวังว่านี่จะช่วยได้