应用场景

在项目中会存在大量这样的需求：

1.选择不同的radio单选框,页面上的部分内容随之显示隐藏

2.选择不同的option下拉框内容，页面上的部分内容随之显示隐藏

如果每次遇到这类需求都单独写方法，不光费时间，还会让我们的代码显得异常冗余，因此我们写个通用方法！

附上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <style>

        .commonCss{

            height: 100px;

            line-height: 100px;

            text-align: center;

            border: 1px solid red;

        }

    </style>

</head>

<body>

<div class="commonCss div1 initHide">div1</div>

<div class="commonCss div2 initHide">div2</div>

<div class="commonCss div3 initHide">div3</div>

<div>

    <form action="">

        <div>

            <label>radio1</label>

            <input type="radio" name="radio" data-show-class=".div1" data-hide-class=".initHide">

            <label>radio2</label>

            <input type="radio" name="radio" data-show-class=".div2" data-hide-class=".initHide">

            <label>radio3</label>

            <input type="radio" name="radio" data-show-class=".div3" data-hide-class=".initHide">

        </div>

        <div>

            <select>

                <option value="">请选择</option>

                <option value="1" data-show-class=".div1" data-hide-class=".initHide">option1</option>

                <option value="2" data-show-class=".div2" data-hide-class=".initHide">option2</option>

                <option value="3" data-show-class=".div3" data-hide-class=".initHide">option3</option>

            </select>

        </div>

    </form>

</div>

<script>

    var myFunction = {

        initRadio : function(){

            $('input:radio').on('change',function(){

                var $showClass = $(this).data('showClass');

                var $hideClass = $(this).data('hideClass');

                $($hideClass).hide();

                $($showClass).show();

            })

        },

        initSelect : function(){

            $('select').on('change',function(){

                var $target = $(this).find('option:selected');

                var $showClass = $target.data('showClass');

                var $hideClass = $target.data('hideClass');

                $($hideClass).hide();

                $($showClass).show();

            })

        }

    };

    myFunction.initRadio();

    myFunction.initSelect();

</script>

</body>

</html>

基于jquery封装通用的控制显示隐藏的方法的更多相关文章

  1. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  2. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  3. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  4. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  5. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  6. 基于jQuery封装的分页组件（可自定义设置）

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  7. vue slot插槽v-show不控制显示隐藏

    vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.

  8. js中按钮控制显示隐藏以及下拉功能

    <script> function show() { var a2=document.getElementById("div2"); if(a2.style.displ ...

  9. jquery的toggle动画效果显示隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. ajax 传递JSON对象参数

    https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...

  2. 廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

    拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...

  3. 深入分析@Transactional的用法

    关键词:事务, 编程式事务,声明式事务.spring 事务管理.AOP事务增强.@Transactional 在分析深入分析@Transactional的使用之前,我们先回顾一下事务的一些基本内容. ...

  4. WinServer 2008 远程桌面连接设置

    WinServer 2008 远程桌面连接设置   1.在服务器端启用远程桌面>>计算机--右键--管理 看远程桌面是否已经启用,若未启用则启用它.配置远程桌面,勾选允许任意版本远程桌面的 ...

  5. Sizeof面试题

    sizeof()功能:计算数据空间的字节数1.与strlen()比较      strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素.       ...

  6. Spatial Transformer Networks(空间变换神经网络)

    Reference:Spatial Transformer Networks [Google.DeepMind]Reference:[Theano源码,基于Lasagne] 闲扯:大数据不如小数据 这 ...

  7. ZeroMQ接口函数之 ：zmq_ctx_new – 创建一个新的ZMQ 环境上下文

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_ctx_new zmq_ctx_new(3)               ØMQ Manual - ØMQ/3.2 ...

  8. python中常用的一些字符串

    capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度 width 的新字符串 c ...

  9. Bigtable 论文 阅读笔记 - 原理部分

    不支持markdown,桑心.更好的阅读体验请看:Github/Bigtable.md Paper: Google Bigtable paper Notes author: Lhfcws Wu Tim ...

  10. Daily Scrum02 12.07

    最近大家都在赶编译的大作业,没日没夜的码代码,调试,大家都很辛苦,但是,我们团队的工作,大家也不能懈怠啊! 大家要顶住压力,加油努力啊! Member 任务进度 下一步工作 吴文会 就总结点进行汇报 ...