मैं वर्तमान में इस डेमो को पेज ट्रांज़िशन के लिए अनुकूलित करने का प्रयास कर रहा हूं, जब आप इनके साथ लिंक पर क्लिक करते हैं उसी वर्ग ने उन पर लागू किया।

मुझे यकीन नहीं है कि querySelectorAll के उपयोग के बाद समान वर्ग वाले सभी तत्वों के लिए कोड के निम्नलिखित भाग को कैसे अनुकूलित किया जाए। आपको क्या लगता है कि इसे querySelectorAll और एक ही वर्ग के कई तत्वों के साथ काम करने के लिए क्या बदलाव किया जाना चाहिए?

(function() {
  const elmHamburger = document.querySelector('.link-with-overlay');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  elmHamburger.addEventListener('click', () => {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      elmHamburger.classList.add('is-opened-navi');

    } else {
      elmHamburger.classList.remove('is-opened-navi');

    }

धन्यवाद!

0
pkid 20 जिंदा 2020, 12:15

1 उत्तर

सबसे बढ़िया उत्तर

सभी लिंक्स को ऑनक्लिक ईवेंट की अनुमति देने के लिए आपको NodeList पर पुनरावृति करने की आवश्यकता होगी कि querySelectorAll विधि वापस आती है।

नोट: आप IE11 में NodeList.forEach नहीं कर सकते हैं, इसलिए आपको पुनरावृति करने से पहले इसे पॉलीफ़िल करना होगा या इसे एक वास्तविक JS सरणी में बदलना होगा।

(function() {
  const elmHamburgers = document.querySelectorAll('.link-with-overlay');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  const onHamburgerClick = function() {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      this.classList.add('is-opened-navi');

    } else {
      this.classList.remove('is-opened-navi');
    }
  };

  // Iterates over all of the elements matched with class .link-with-overlay and 
  // adds an onclick event listener

  elmHamburgers.forEach(elem => elem.addEventListener('click', onHamburgerClick));

})();

आप सशर्त को भी बदल सकते हैं: if (overlay.isOpened === true) {... this.classList का उपयोग करके एक लाइनर के साथ

this.classList.toggle('is-opened-navi', overlay.isOpened)
1
ourmaninamsterdam 20 जिंदा 2020, 12:37