首頁(yè) 猿問(wèn) 如何用最簡(jiǎn)短的方式,簡(jiǎn)化下面的代碼?

如何用最簡(jiǎn)短的方式,簡(jiǎn)化下面的代碼?

JavaScript JQuery

熠熠生陽(yáng) 2016-06-07 15:57:49

$(document).ready(function(){ ? ??$("#b1").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb1").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b2").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb2").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b3").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb3").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b4").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb4").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b5").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb5").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b6").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb6").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b7").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb7").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b8").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb8").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b9").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb9").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b10").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb10").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b11").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb11").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b12").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb12").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b13").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb13").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b14").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb14").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b15").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb15").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b16").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb16").fadeIn(500); ??}); }); $(document).ready(function(){ ? ??$("#b0").click(function(){ $("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0); ??$("#lb0").fadeIn(500); ??}); });

查看完整描述

3 回答

已采納

Suber丶林

TA貢獻(xiàn)75條經(jīng)驗(yàn) 獲得超180個(gè)贊

測(cè)試過(guò)，冇問(wèn)題。

//?順便優(yōu)化了點(diǎn)性能
$(function()?{
????//?使用嚴(yán)格模式
????//?提防常見(jiàn)怪異BUG
????'use?strict';

????//?存儲(chǔ)獲取到的DOM節(jié)點(diǎn)
????var?$DOMs?=?$("#lb0,?#lb1,?#lb2,?#lb3,?#lb4,?#lb5,?#lb6,?#lb7,?#lb8,?#lb9,?#lb10,?#lb11,?#lb12,?#lb13,?#lb14,?#lb15,?#lb16"),
????????i?=?0,
????????len?=?$DOMs.length;

????for?(;?i?<?len;?i++)?{
????????//?使用閉包處理JavaScript沒(méi)有塊級(jí)作用域問(wèn)題
????????(function(index)?{
????????????var?name?=?'b'?+?index;
????????????$('#'?+?name).on('click',?function()?{
????????????????//?使用filter，提防再次去獲取DOM節(jié)點(diǎn)
????????????????$DOMs.fadeOut(0).filter('#l'?+?name).fadeIn(500);
????????????});
????????}(i));
????}
});

5 反對(duì) 回復(fù) 2016-06-07

熠熠生陽(yáng)
牛人,只有這個(gè)功能正常.其他解決方案,都有bug

回復(fù) 2016-06-08
熠熠生陽(yáng)
受教了,謝謝

回復(fù) 2016-06-08

不知名的前端程序猴

TA貢獻(xiàn)32條經(jīng)驗(yàn) 獲得超22個(gè)贊

將#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0這些元素都加一個(gè)class屬性。假設(shè)現(xiàn)在class名設(shè)置為divclass

然后寫(xiě)一個(gè)函數(shù)

function?fadeDiv(idname){
????var?str="#"+idname;
????var?str2="#l"+idname;
????$(str).click(function(){
$(".divclass").fadeOut(0);
??$(str2).fadeIn(500);
??});
}

然后再寫(xiě)一個(gè)循環(huán)綁到這個(gè)函數(shù)就好了。

4 反對(duì) 回復(fù) 2016-06-07

Walk_

TA貢獻(xiàn)48條經(jīng)驗(yàn) 獲得超30個(gè)贊

//大體思路就是這樣子，沒(méi)有測(cè)試過(guò)可能有錯(cuò)誤。?
//如果大家發(fā)現(xiàn)錯(cuò)誤?請(qǐng)一定告訴我哈QAQ
function?fade_element(num){
????????$("+'#b'+num").click(function(){
????????$("#lb1,#lb2,#lb3,#lb4,#lb5,#lb6,#lb7,#lb8,#lb9,#lb10,#lb11,#lb12,#lb13,#lb14,#lb15,#lb16,#lb0").fadeOut(0);
?????$("+'#lb'+num").fadeIn(500);
});
}
for(var?i=1;i<18;i++){
????(function(i){
?????fade_element(i);
????})(i);
?}

3 反對(duì) 回復(fù) 2016-06-07