如何用最简短的方式,简化下面的代码?

Question

$(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);
  });
});

Answer 1

测试过，冇问题。// 顺便优化了点性能 $(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));     } });

Answer 2

将#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);   }); }然后再写一个循环绑到这个函数就好了。

Answer 3

//大体思路就是这样子，没有测试过可能有错误。  //如果大家发现错误 请一定告诉我哈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);  }