亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何用最簡短的方式,簡化下面的代碼?

如何用最簡短的方式,簡化下面的代碼?

熠熠生陽 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貢獻75條經驗 獲得超180個贊

測試過,冇問題。

//?順便優化了點性能
$(function()?{
????//?使用嚴格模式
????//?提防常見怪異BUG
????'use?strict';

????//?存儲獲取到的DOM節點
????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沒有塊級作用域問題
????????(function(index)?{
????????????var?name?=?'b'?+?index;
????????????$('#'?+?name).on('click',?function()?{
????????????????//?使用filter,提防再次去獲取DOM節點
????????????????$DOMs.fadeOut(0).filter('#l'?+?name).fadeIn(500);
????????????});
????????}(i));
????}
});


查看完整回答
5 反對 回復 2016-06-07
?
不知名的前端程序猴

TA貢獻32條經驗 獲得超22個贊

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

然后寫一個函數

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

然后再寫一個循環綁到這個函數就好了。


查看完整回答
4 反對 回復 2016-06-07
?
Walk_

TA貢獻48條經驗 獲得超30個贊

//大體思路就是這樣子,沒有測試過可能有錯誤。?
//如果大家發現錯誤?請一定告訴我哈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 反對 回復 2016-06-07
  • 3 回答
  • 1 關注
  • 2035 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號