[已解决]优化重复代码 | 【有奖问答】

不二如是

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

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

友情提示：

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

跳转到最佳答案楼层

ddd-115

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鬼吹灯

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

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

不二如是

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

优化结果： 11-13优化重复代码-随机颜色.zip (36.91 KB, 下载次数: 1, 售价: 6 鱼币)

2017-11-13 09:47 上传

点击文件名下载附件