应用场景

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

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. hdu 4547（LCA）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4547 思路:这题的本质还是LCA问题,但是需要注意的地方有: 1.如果Q中u,v的lca为u,那么只需 ...

  2. Log4j框架

    一.Log4j基本使用方法 Log4j由三个重要的组件构成:日志信息的优先级 Loggers,日志信息的输出目的地 Appenders,日志信息的输出格式 Layouts .日志信息的优先级从高到低 ...

  3. [工作中的设计模式]迭代子模式Iterator

    一.模式解析 迭代子模式又叫游标(Cursor)模式,是对象的行为模式.迭代子模式可以顺序地访问一个聚集中的元素而不必暴露聚集的内部表象 1.迭代子模式一般用于对集合框架的访问,常用的集合框架为lis ...

  4. Delphi Webbrowser 修改 textarea 值 百度

    有个按钮 调用  <a href="#" onclick="$.ajax({url: '/redmine/journals/edit/29606.js', type ...

  5. MySQL 存储过程控制语句

    变量作用域内部的变量在其作用域范围内享有更高的优先权,当执行到end.变量时,内部变量消失,此时已经在其作用域外,变量不再可见了,应为在存储过程外再也不能找到这个申明的变量,但是你可以通过out参数或 ...

  6. python 自带的ide 不能保存文件

    初学python 用shell写的代码结果不能保存,经查询,原因有人说是因为文件里有中文, import random secret =random.randint(1,100) guess=0 tr ...

  7. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  8. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  9. MongoDB使用小结：一些常用操作分享

    本文整理了一年多以来我常用的MongoDB操作,涉及mongo-shell.pymongo,既有运维层面也有应用层面,内容有浅有深,这也就是我从零到熟练的历程. MongoDB的使用之前也分享过一篇, ...

  10. Browsersync — 省时的浏览器同步测试工具

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...