jQuery的DRY原则

最新推荐文章于 2023-03-28 12:47:43 发布

Void_CM

最新推荐文章于 2023-03-28 12:47:43 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113843647

版权

Html+CSS+js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

DON’T REPEAT YOURSELF

尽可能的精简你的代码
在具有关联关系的元素中，由1可知2（在第一个元素中包含第二个元素的信息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the use of jQuery</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            height: 300px;
            line-height: 300px;
        }
        header{
            width: 100%;
            height: 400px;
            text-align: center;
            background-color: gray;
            font-size: 40px;
            color: white;
        }
        button{
            width: 80px;
            height: 40px;
            border: none;
            border-radius: 5px;
        }
        main{
            display: flex;
            padding: 20px;
            width: 100%;
            height: 120px;
            
        }
        .col-xs-3{
            margin: auto;
            width: 25%;
            height: 120px;
        }
        .box{
            width: 100px;
            height: 100px;
            display: none;
        }
        .box-head{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: cornflowerblue;
            border-radius: 5px 5px 0 0 ;
            border: cornflowerblue 1px solid;
            
        }
        .box-content{
           width: 100px;
           height: 60px;
           text-align: center;
           line-height: 60px;
           border-radius: 0px 0px 5px 5px;
           border: cornflowerblue 1px solid;
        }
    </style>
</head>
<body>
    
    <header>
        <div class="jumbotron">
            <h1>Learn jQuery</h1>
            <!-- data-***自定义属性，代码复用 -->
            <button class="box-btn" data-boxId="box1">#btn1</button>
            <button class="box-btn" data-boxId="box2">#btn2</button>
            <button class="box-btn" data-boxId="box3">#btn3</button>
            <button class="box-btn" data-boxId="box4">#btn4</button>
        </div>
    </header>

    <main>
        <div class="col-xs-3">
            <div id="box1" class="box">
                <div class="box-head">#box1</div>
                <div class="box-content">content</div>
            </div>
        </div>
        
        <div class="col-xs-3">
            <div id="box2" class="box">
                <div class="box-head">#box1</div>
                <div class="box-content">content</div>
            </div>
        </div>
        <div class="col-xs-3">
            <div id="box3" class="box">
                <div class="box-head">#box1</div>
                <div class="box-content">content</div>
            </div>
        </div>
        <div class="col-xs-3">
            <div id="box4" class="box">
                <div class="box-head">#box1</div>
                <div class="box-content">content</div>
            </div>  
        </div>  
    </main>
    <!-- 要使用jQuery一定要引用 -->
    <script src="/jQuery/js/jquery-3.5.1.js"></script>

    <script>
		
       $(function() {
        /*这里通过在btn添加data-boxId 可以利用this获取要与之对应的boxId*/    
        $(".box-btn").on('click',function(){
            var boxId = $(this).attr('data-boxId');
            $('#'+boxId).toggle();
        });

       });

    </script> 
</body>
</html>

btn-and-box

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的DRY原则

DON’T REPEAT YOURSELF尽可能的精简你的代码在具有关联关系的元素中，由1可知2（在第一个元素中包含第二个元素的信息）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫