论坛 › Web开发 › 优化重复代码 | 【有奖问答】

不二如是 发表于 2017-8-30 10:49:58

优化重复代码 | 【有奖问答】

这是一段“重复性”很高的代码

哪位鱼油可以通过封装函数对下面的代码优化呢？

友情提示：

1、点击id为cn（1，2，3，4）的div，被点击的显示，其余三个隐藏



$("#c1").click(function () {
      $("#div2").hide();
      $("#div3").hide();
      $("#div4").hide();
      $("#div1").show();
    })

    $("#c2").click(function () {
      $("#div1").hide();
      $("#div4").hide();
      $("#div3").hide();
      $("#div2").show();
    })

    $("#c3").click(function () {
      $("#div1").hide();
      $("#div2").hide();
      $("#div4").hide();
      $("#div3").show();
    })

    $("#c4").click(function () {
      $("#div1").hide();
      $("#div2").hide();
      $("#div3").hide();
      $("#div4").show();
    })

ddd-115 发表于 2017-8-30 10:49:59

function showOrHide() {
    $('.aa').click(function() {
      var id = $(this).attr('id');
      var i = id.substring(1);
      for (var j = 1; j <= 4; j++) {
            if (j == i) {
                $('#div' + j).show();
            } else {
                $('#div' + j).hide();
            }
      }   
    });
}

t鬼吹灯 发表于 2017-11-6 11:11:11

本帖最后由 t鬼吹灯 于 2017-11-6 11:14 编辑

var list = [$("#c1"),$("#c2"),$("#c3"),$("#c4")];
for(var i =0 ; i< list.length;i++){
        list.click(function(){
                mainFn();
        });
};

function mainFn(){
        $("#div2").hide();
      $("#div3").hide();
      $("#div4").hide();
      $("#div1").show();
}

不二如是 发表于 2017-11-13 09:47:13

ddd-115 发表于 2017-8-30 10:49
function showOrHide() {
    $('.aa').click(function() {
      var id = $(this).attr('id');



优化结果：

查看完整版本: 优化重复代码 | 【有奖问答】