如何讓這個js更簡單？

-3

//PAGE ABOUT 
$('nav ul.nav-menu li a#about-content').on("click", function() { 
    $('section.content').not('content-about').removeClass('active') 
    $('section.content.content-about').addClass('active');   
}); 

//PAGE PORTFOLIO 
$('nav ul.nav-menu li a#portfolio-content').on("click", function() { 
    $('section.content').not('content-portfolio').removeClass('active') 
    $('section.content.content-portfolio').addClass('active');   
}); 

//PAGE BLOG 
$('nav ul.nav-menu li a#blog-content').on("click", function() { 
    $('section.content').not('content-blog').removeClass('active') 
    $('section.content.content-blog').addClass('active');   
}); 

//PAGE CONTACT 
$('nav ul.nav-menu li a#contact-content').on("click", function() { 
    $('section.content').not('content-contact').removeClass('active') 
    $('section.content.content-contact').addClass('active');   
});

你能幫我做這個代碼更簡單？

來源

2016-12-15 arana

首先，從所有選擇器中刪除'nav ul.nav-menu li a'，因爲您在每個選擇器的末尾通過ID選擇一個元素......因爲ID **必須**在文檔中是唯一的，你使用的前綴是多餘的 –

給元素一個ID，例如關於「' - 'portfolio」的'id =「，然後在你的onclick函數中使用元素ID來設置選擇器。 'not（'content - '+ ElementID）''和$（'section.content.content - '+ ElementID）.addClass'這樣你可以爲所有這些元素運行一個函數。 – NewToJS

它實際上很簡單。最好的你我想你可以真正做的是寫一個函數：

function handleClick(className) { 
    $('section.content').not(className).removeClass('active'); 
    $('section.content.' + className).addClass('active'); 
}

您還可以更改.on('click', cb)到.click(cb)，並作爲@Jaromanda X上面提到的，您可以直接ID選擇，因爲ID必須具有唯一性。

// PAGE ABOUT 
$('#about-content').click(handleClick('content-about'); 

//PAGE PORTFOLIO 
$('#portfolio-content').click(handleClick('content-portfolio')); 

//PAGE BLOG 
$('#blog-content').click(handleClick('content-blog')); 

//PAGE CONTACT 
$('#contact-content').click(handleClick('content-contact'));

來源

2016-12-15 02:05:41

這是一樣簡單，因爲它得到

首先，刪除了所有nav ul.nav-menu li a從每個選擇，作爲一個ID是唯一

$('#about-content,#portfolio-content,#blog-content,#contact-content').on("click", function() { 
    var base = this.id.split('-')[0]; 
    $('section.content').not('content-' + base).removeClass('active'); 
    $('section.content.content-' + base).addClass('active'); 
});

注意：如果你的ID是不獨特的，jQuery似乎至少在某種程度上處理 - 但我建議你根本沒有重複的ID，永遠：p

來源

2016-12-15 02:07:08

如何讓這個js更簡單？

回答

相關問題