应用场景

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

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. git学习（三）：版本控制

    查看每次修改日志 git log 会显示每次修改的日期和相应提交的commit 版本控制 git reset --hard <版本id> 这里的id可以是HEAD^(上一个) HEAD^^ ...

  2. 10 Cookie/Session

    JSP/EL入门     * SUN提供了开发WEB资源的技术     Servlet/JSP              * response.getWriter().write();         ...

  3. zorka源码解读之通过beanshell进行插桩的流程

    zorka中插桩流程概述 1.在SpyDefinition中配置插桩属性,将SpyDefinition实例提交给插桩引擎.2.SpyDefinition实例中包含了插桩探针probes,probe插入 ...

  4. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

  5. type of 操作符和instanceof操作符的区别以及使用方法

    经常见到用typeof和instanceof检测一个变量类型,作为前端小白经常不知道这两者具体的详细用法和区别,今天就整理一下谨记! javaScript中有6中数据类型: 1.Undefinde 2 ...

  6. Nginx日常操作和配置

    安装位置:/usr/local/nginx配置目录:/usr/local/nginx/conf配置文件:/usr/local/nginx/conf/nginx.conf启动命令:/usr/local/ ...

  7. 解决使用osgModeling的Loft生成管子时的bug(续)

    今天发现有一些情况下, 还是无法生成管道, 排查了一天发现问题好像出在管线头两个点的x完全相同时, 会出这个问题.   看了半天的Loft源码, 发现问题出在Loft::considerBasisX函 ...

  8. C#_Express-ickd接口

    爱查快递接口使用 using System; using System.Collections.Generic; using System.IO; using System.Net; using Sy ...

  9. AnjularJS异步编程 Promise和$q

    Promise,是一种异步处理模式. js代码的函数嵌套会使得程序执行异步代码时很难调试.因为多重嵌套的函数无法确定何时触发回调. 如: funA(arg1,arg2,function(){ func ...

  10. [译] jQuery 3 有哪些新东西

    转自:https://github.com/cssmagic/blog/issues/59 jQuery 的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的.jQuery 提供了极为友好 ...