सरल जावास्क्रिप्ट टॉगल div समारोह

Question

मैंने एक कोड लिखा है जो मेरे डिव को दूसरे मेनू से चलाता है। मुझे नहीं पता कि कौन सा बेहतर है और इसका इस्तेमाल किया जाना चाहिए। क्या मुझे कुछ प्रतिक्रिया मिल सकती है?

एक समारोह में पहला कोड:

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";
    }

Answer 1

मुझे लगता है कि अगर आप को किनारे के मामलों के बारे में सोचने की ज़रूरत नहीं है, तो राज्य परिवर्तन को लिखना और समझना आसान है।

पहले मामले में, आप पहले से ही उस राज्य में शुरू करते हैं जो आप चाहते हैं और केवल दोनों राज्यों को उलटने की आवश्यकता है। दूसरे में, आपको बस हर राज्य को "बंद" करना होगा और जिसको आप चाहते हैं उसे "चालू करें"।

मुझे लगता है कि अगर आप इस तरह से सोचते हैं तो यह आसान है।

दो साइडबार

मुझे लगता है कि आप 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
• तत्व.क्लासिस्ट
• 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>

---

Answer 2

अगर मुझे आपके 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 लॉजिक को सरल बनाने में मदद करती है, और आपके कोड की पुनरावृत्ति को भी कम करती है (इसे DRY रखते हुए ) और यह असीम रूप से उतने मेनू के लिए उपयोग करने योग्य है जितना आप चाहें! :)

अन्य प्लस यह है कि अब आप डिफ़ॉल्ट रूप से अपने किसी भी मेनू को खोलना चुन सकते हैं, और CSS में अधिक प्रदर्शन करने वाले एनिमेशन को लागू कर सकते हैं।

आशा है कि इससे मदद मिली।