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

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