应用场景

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

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. NPOIExcel

    public class NPOIExcel { private string _title; private string _sheetName; private string _filePath; ...

  2. LINUX 查看当前系统的负载情况

    uptime linux uptime命令主要用于获取主机运行时间和查询linux系统负载等信息. eg: # uptime 02:03:50 up 126 days, 12:57, 2 users, ...

  3. jquery取值

    1. 如何用jquery获取<input id="test" name="test" type="text"/>中输入的值?$( ...

  4. data Binding

    在WEEX中,我们使用{{}}双括号来对数据进行绑定,一旦我们对数据进行了绑定,当数据发生改变时,模板中的内容也会发生相应的改变. 如果绑定的数据是一个对象,里面有很多的内容,我们可以使用  .   ...

  5. securecrt 检测到较旧的配置设置 需要迁移为新格式

    secureCRT一直没有关闭,新登录的服务器的配置信息没有保存,一直打开时无法保存的,需要全关了,再打开就正常了!!!

  6. 【hihoCoder】1037 : 数字三角形

    题目:http://hihocoder.com/problemset/problem/1037 一个迷宫有n层,第 i 层有 i 个房间 从第i层的第i个房间(i, i)可以走到第i+1层的第i个房间 ...

  7. 四种常见的 POST-------- content-type数据提交方式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...

  8. VS2013菜单栏文字全大写的问题

    从VS2010转到VS2013,2013新增的很多功能确实很方便,只是有一点,菜单栏文字变成全大写了,看着有点不习惯. 打开注册表编辑器,找到 HKEY_CURRENT_USER\Software\M ...

  9. Canvas里绘制矩阵文字

    效果如下 实现方法: [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1 ...

  10. mac安装tensorflow报错

    问题:mac安装tensorflow过程中,爆出oserror:permission denied 解决方案:关闭mac的sip,然后sudo安装 关闭sip的方法:重启mac,按住command+R ...