目前我有以下內容：
const mainBannerInfo = document.querySelector('.bigfullbanner').querySelector('.banner-row').querySelector('.info-col');
const title__MainBanner = mainBannerInfo.querySelector('h4');
const subtitle__MainBanner = mainBannerInfo.querySelector('p');
const buttonCTA__MainBanner = mainBannerInfo.getElementsByClassName('button-big-banner');
let watchMedia = window.matchMedia("( max-width: 1023px )")
function whiteToBlackInfo__MainBanner() {
//Changing TITLE text styles
title__MainBanner.classList.remove('text-white');
title__MainBanner.classList.add('text-black');
//Changing SUBTITLE styles
subtitle__MainBanner.classList.remove('text-white');
subtitle__MainBanner.classList.add('text-black');
//Changing CTA Buttons styles
for(let i = 0; i < buttonCTA__MainBanner.length; i ) {
buttonCTA__MainBanner[i].classList.remove('text-black');
buttonCTA__MainBanner[i].classList.add('text-white');
buttonCTA__MainBanner[i].classList.remove('bg-white');
buttonCTA__MainBanner[i].classList.add('bg-black');
}
}
function blackToWhiteInfo__MainBanner() {
//Changing TITLE text styles
title__MainBanner.classList.remove('text-black');
title__MainBanner.classList.add('text-white');
//Changing SUBTITLE styles
subtitle__MainBanner.classList.remove('text-black');
subtitle__MainBanner.classList.add('text-white');
//Changing CTA Buttons styles
for(let i = 0; i < buttonCTA__MainBanner.length; i ) {
buttonCTA__MainBanner[i].classList.remove('text-white');
buttonCTA__MainBanner[i].classList.add('text-black');
buttonCTA__MainBanner[i].classList.remove('bg-black');
buttonCTA__MainBanner[i].classList.add('bg-white');
}
}
if(
mainBannerInfo.classList.contains('bottomright') ||
mainBannerInfo.classList.contains('bottomleft') ||
mainBannerInfo.classList.contains('topright') ||
mainBannerInfo.classList.contains('topleft') ||
mainBannerInfo.classList.contains('centerInfo') &&
!mainBannerInfo.classList.contains('keep-color')) {
blackToWhiteInfo__MainBanner();
if(
mainBannerInfo.classList.contains('outsideDesktop') &&
watchMedia.matches == false
) {
whiteToBlackInfo__MainBanner();
} else if(
mainBannerInfo.classList.contains('outsideMobile') &&
watchMedia.matches == true
) {
whiteToBlackInfo__MainBanner();
}
}
// -------------------------------------------------
我目前正在開發 CMS，我的任務是通過自動更改某些橫幅的樣式來幫助內容負責人，因此他只需在 html 檔案中撰寫/洗掉一些類。所以我創建了 DOM 選擇器并創建了一些函式來實作這一點。問題是我有另一個幾乎相同的橫幅：
const novedadBannerInfo = document.querySelector('.smallfullbanner').querySelector('.banner-row').querySelector('.info-col');
const title__novedadBanner = novedadBannerInfo.querySelector('h4');
const subtitle__novedadBanner = novedadBannerInfo.querySelector('p');
const buttonCTA__novedadBanner = novedadBannerInfo.getElementsByClassName('button-big-banner');
function whiteToBlackInfo__novedadBanner() {
//Changing TITLE text styles
title__novedadBanner.classList.remove('text-white');
title__novedadBanner.classList.add('text-black');
//Changing SUBTITLE styles
subtitle__novedadBanner.classList.remove('text-white');
subtitle__novedadBanner.classList.add('text-black');
//Changing CTA Buttons styles
for(let i = 0; i < buttonCTA__novedadBanner.length; i ) {
buttonCTA__novedadBanner[i].classList.remove('text-black');
buttonCTA__novedadBanner[i].classList.add('text-white');
buttonCTA__novedadBanner[i].classList.remove('bg-white');
buttonCTA__novedadBanner[i].classList.add('bg-black');
}
}
function blackToWhiteInfo__novedadBanner() {
//Changing TITLE text styles
title__novedadBanner.classList.remove('text-black');
title__novedadBanner.classList.add('text-white');
//Changing SUBTITLE styles
subtitle__novedadBanner.classList.remove('text-black');
subtitle__novedadBanner.classList.add('text-white');
//Changing CTA Buttons styles
for(let i = 0; i < buttonCTA__novedadBanner.length; i ) {
buttonCTA__novedadBanner[i].classList.remove('text-white');
buttonCTA__novedadBanner[i].classList.add('text-black');
buttonCTA__novedadBanner[i].classList.remove('bg-black');
buttonCTA__novedadBanner[i].classList.add('bg-white');
}
}
if(
novedadBannerInfo.classList.contains('bottomright') ||
novedadBannerInfo.classList.contains('bottomleft') ||
novedadBannerInfo.classList.contains('topright') ||
novedadBannerInfo.classList.contains('topleft') ||
novedadBannerInfo.classList.contains('centerInfo') &&
!mainBannerInfo.classList.contains('keep-color')) {
blackToWhiteInfo__novedadBanner();
if(
novedadBannerInfo.classList.contains('outsideDesktop') &&
watchMedia.matches == false
) {
whiteToBlackInfo__novedadBanner();
} else if(
novedadBannerInfo.classList.contains('outsideMobile') &&
watchMedia.matches == true
) {
whiteToBlackInfo__novedadBanner();
}
}
// -------------------------------------------------
如您所見，它實際上是相同的，但存盤選擇器的變數必須更改，我必須重新創建所有這些函式。
有沒有辦法縮小這段代碼？
uj5u.com熱心網友回復：
您可以mainBanner(color1, color2)使用兩種顏色作為引數創建一個輔助函式。在此函式中，您可以使用color1和動態color2構建您的類（如 text-white、text-black 等）。
請參閱此代碼：
function mainBanner(color1, color2) {
//Changing TITLE text styles
title__MainBanner.classList.remove('text-' color1);
title__MainBanner.classList.add('text-' color2);
//Changing SUBTITLE styles
subtitle__MainBanner.classList.remove('text-' color1);
subtitle__MainBanner.classList.add('text-' color2);
//Changing CTA Buttons styles
for(let i = 0; i < buttonCTA__MainBanner.length; i ) {
buttonCTA__MainBanner[i].classList.remove('text-' color2);
buttonCTA__MainBanner[i].classList.add('text-' color1);
buttonCTA__MainBanner[i].classList.remove('bg-' color1);
buttonCTA__MainBanner[i].classList.add('bg-' color2);
}
}
function blackToWhiteInfo__MainBanner() {
mainBanner('black', 'white');
}
function whiteToBlackInfo__MainBanner() {
mainBanner('white', 'black');
}
如果你有比這兩種顏色更多的選項，你可以將一個options物件傳遞給mainBanner(options)函式并像這樣實作它：
function mainBanner(options) {
var color1 = options.color1;
var color2 = options.color2;
var textClsPrefix = options.textClsPrefix;
var someOtherProperty = options.someOtherProperty;
...
}
// sample call 1
mainBanner({
color1: "white",
color2: "black",
textClsPrefix: "text-",
someOtherProperty: "some-value"
});
// sample call 2
mainBanner({
color1: "black",
color2: "white",
textClsPrefix: "text-light-",
someOtherProperty: "some-value-2"
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/413754.html
標籤：