QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 188|回复: 4

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

[复制链接]
最佳答案
96 
累计签到:479 天
连续签到:7 天
不二如是 发表于 2017-8-30 10:49:58 1884 | 显示全部楼层 |阅读模式
30鱼币
这是一段“重复性”很高的代码


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

友情提示:

1、点击id为cn(1,2,3,4)的div,被点击的显示,其余三个隐藏




  1. $("#c1").click(function () {
  2.         $("#div2").hide();
  3.         $("#div3").hide();
  4.         $("#div4").hide();
  5.         $("#div1").show();
  6.     })

  7.     $("#c2").click(function () {
  8.         $("#div1").hide();
  9.         $("#div4").hide();
  10.         $("#div3").hide();
  11.         $("#div2").show();
  12.     })

  13.     $("#c3").click(function () {
  14.         $("#div1").hide();
  15.         $("#div2").hide();
  16.         $("#div4").hide();
  17.         $("#div3").show();
  18.     })

  19.     $("#c4").click(function () {
  20.         $("#div1").hide();
  21.         $("#div2").hide();
  22.         $("#div3").hide();
  23.         $("#div4").show();
  24.     })
复制代码
最佳答案
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();
            }
        }   
    });
}

最佳答案

查看完整内容

function showOrHide() { $('.aa').click(function() { var id = $(this).attr('id'); var i = id.substring(1); for (var j = 1; j
楼层
跳转到指定楼层
最佳答案
1 
累计签到:10 天
连续签到:3 天
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();
            }
        }   
    });
}

点评

我很赞同!: 5.0
我很赞同!: 5
很棒哦~ 利用jq的DOM操作,获取选择id序号,触发相应操作  发表于 2017-11-13 08:50

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 棒!

查看全部评分

最佳答案
0 
累计签到:2 天
连续签到:1 天
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();
}
最佳答案
96 
累计签到:479 天
连续签到:7 天
不二如是  楼主| 发表于 2017-11-13 09:47:13 | 显示全部楼层
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 鱼币)

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-11-25 19:04

快速回复 返回顶部 返回列表