重寫代碼在一個循環

我剛學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); 
    } 
    }); 
});

來源

2017-08-31 BrooonS

在你使用的ID選擇第一個代碼塊（例如'＃menu'）在第二個你使用類選擇（例如'.menu'）。這可能是你的問題嗎？ – Jamiec

給出的循環與你的代碼沒有任何關係？ – Ivan

也許是這樣的：

// 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);

來源

2017-08-31 14:43:34

非常感謝您的幫助。 – BrooonS

這是您正在尋找的循環！

在forEach()循環中，您正在循環使用字符串數組，因此組件包含字符串元素（所以此處爲'menu'，'about'等）。然後裏面的循環體設置兩個變量：

selector是選擇字符串
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); 
 
    }); 
 

 
});

來源

2017-08-31 14:35:46 Ivan

重寫代碼在一個循環

回答

相關問題