循環重寫代碼

Question

我只是在學習JS和jQuery，所以我無法減少正常代碼如下所示：

var menuBtn = '#menu',
    classMenuOpen = 'side_menu_open',

    aboutBtn = '#about',
    classAboutOpen = 'side_about_open',

    dateBtn = '#date',
    classDateOpen = 'side_date_open',

    closeBtn = '.header__menu a, .close';

// Menu Side
$(menuBtn).on('click', function() {
  $('html').toggleClass(classMenuOpen);
});
$(closeBtn).not(menuBtn).on('click', function() {
  $('html').removeClass(classMenuOpen);
});

// About Side
$(aboutBtn).on('click', function() {
  $('html').toggleClass(classAboutOpen);
});
$(closeBtn).not(aboutBtn).on('click', function() {
  $('html').removeClass(classAboutOpen);
});

// Date Side
$(dateBtn).on('click', function() {
  $('html').toggleClass(classDateOpen);
});
$(closeBtn).not(dateBtn).on('click', function() {
  $('html').removeClass(classDateOpen);
});

我想編寫一個循環（下面的示例），但是知識還不夠。 希望有人能提供幫助，在此先感謝;）

['menu', 'about', 'date'].forEach((selector) => {
  $('.' + selector + ' .scrollbar-inner').scrollbar({
    onScroll: function(y, x){
      $('.' + selector + ' .scrollbar-inner').toggleClass('scroll-shadow', y.scroll >= 5);
    }
  });
});

Answer 1

這是您要尋找的循環！

在forEach()循環中，您正在循環遍歷字符串數組，component包含字符串元素（因此這里是'menu' ， 'about'等）。 然后在循環體內設置兩個變量：

1. selector是選擇器字符串

2. classOpen是您與組件關聯的元素的類名

然后，您基本上只使用這兩個變量編寫相同的代碼，而不用設置字符串編寫三次代碼。

 let closeBtn = '.header__menu a, .close' ['menu', 'about', 'date'].forEach(function(component) { let selector = '#' + component; let classOpen = '.side_' + component + '_open'; $(selector).on('click', function() { $('html').toggleClass(classOpen); }); $(closeBtn).not(selector).on('click', function() { $('html').removeClass(selector); }); }); 

Answer 2

也許是這樣的：

// wrap in IIFE for scope containment
(function($) {
  // Setup button keys
  const buttons = ['menu', 'about', 'date'];
  // click handler
  const createClickHandler = value => {
    // set loop variables
    let selector = `#${value}`
    ,   className = `side_${value}_open`;
    // create event triggers
    $(selector).on('click', e => $('html').toggleClass(className));
    $('.header__menu a, .close').not(selector).on('click', e => $('html').removeClass(className))
  };
  // iterate keys and apply handler method
  buttons.forEach(createClickHandler);

})(jQuery);