应用场景

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

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. supervisor拉起daemon进程(falcon-agent)测试

    falcon-agent started..., pid= falcon-agent now is running already, pid= falcon-agent now is running ...

  2. 《DSP using MATLAB》示例Example5.11

  3. gulp自动化构建

    最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来... 首先了解什么是gulp? 我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前 ...

  4. LogPolar 对数极坐标

    LogPolar 对数极坐标 cvLogPolar 对数极坐标(logpolar)是仿真生物视网膜中央凹陷的特性,具有数据压缩的能力,可用于目标跟踪中快速尺度和旋转变换不变的模板匹配. 对数极坐标其实 ...

  5. Is It A Tree?[HDU1325][PKU1308]

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. 踩坑事件：windows操作系统下的eclipse中编写SparkSQL不能从本地读取或者保存parquet文件

    这个大坑... .... 如题,在Windows的eclipse中编写SparkSQL代码时,编写如下代码时,一运行就抛出一堆空指针异常: // 首先还是创建SparkConf SparkConf c ...

  7. 谈谈.Net技术面试

    1.引子 最近一直在负责.net(B/S方向)技术面试相关的工作,前前后后面试了不少人,但是通过率较低,大概只有20%左右:有颇多感慨. 最近也一直比较困惑,原因究竟是什么? 是我们要求太高,应聘者本 ...

  8. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  9. java 输入年月，获取日历表

    /* 做日历作业: 输入一个时间如: 2016-11 就显示2016年11月的日历显示 */ import java.util.*; class calendar { public static vo ...

  10. Odoo Graph 指定默认 类型

    <graph string='Sale Paid Grapg' type="pivot"> <field name='section_id' type=" ...