首页 > 代码库 > 基于jquery封装通用的控制显示隐藏的方法

基于jquery封装通用的控制显示隐藏的方法

2024-08-24 02:24:54   218人阅读

应用场景

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

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封装通用的控制显示隐藏的方法


联系
我们