JQ_动态生成按钮

学到后面发现前面的内容都不是很巩固了。

知道自己的不足之后，最近在复习一些学过的知识。

（你会发现我有好几篇的开场白都是这个，想不出开场白了。。。T T）

 

根据输入的内容生成按钮，点击按钮可以弹出alert框（噢这个功能是我最头疼的，涉及到了闭包的相关知识）

从下面几个链接了解到了相关知识（虽然以前了解过，但是道理我都懂，我不会用的既视感T T,敲了代码理解就深刻了，知道应用场景了）

（感谢下面的链接的知识分享）

---

 

for循环中输出当前循环值：

https://www.zhihu.com/question/36188340/answer/103368544

js闭包：

http://www.jb51.net/article/24101.htm

js匿名函数：

http://www.cnblogs.com/chenxianbin89/archive/2010/01/28/1658392.html

 

---

再次谢谢！

 

下面贴上我的代码：

html:

<div class="content">
        <h2>动态生成按钮</h2>
        <div class="info">
            <label for="num">请输入您要动态生成的按钮的数量：</label>
            <input type="text" name="num" id="num" class="txt" required>    
        </div>

        <input type="button" name="sub" id="sub" class="sub" value="生成按钮">
        <input type="button" name="clear" id="clear" class="sub" value="清除画布">    
        <div class="clearfix"></div>        
        
        <div class="btn_content" id="btn_content">

        </div>

        <div class="clearfix"></div>

    
    </div>

css:

    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .content{
            width:800px;
            margin:100px auto;
            border:2px solid pink;
        }
        .content>h2{
            margin-top: 20px;
            text-align: center;
            color: #4682B4;
            margin-bottom: 30px
        }
        .content label{
            font-size:18x;
            color: #9F79EE;
            font-weight: bold;
        }
        .info{
            margin-left: 180px;
            margin-bottom: 20px;
        }
        .txt{
            height:28px;
            width: 200px;
            font-size:16px;
            border-radius: 10px;
            box-shadow: none;
            outline: none;
            background: #F8F8FF;
            color: #8968CD;
            border: 1px solid #F8F8FF;
            text-align: center;
        }
        .sub{
            height: 35px;
            width: 120px;
            font-size:18px;
            font-weight: bold;
            margin: 20px 20px 20px 50px;
            border-radius: 10px;
            border:0;
            background: #436EEE;
            color: #fff;
            outline: none; 
            opacity: 0.8;
            float: left;
        }
        .sub:hover{
            opacity: 1;
        }
        .clearfix{
            clear: both;
        }
        .btn_content{
            border-top: 1px solid #FFDEAD;
            margin:0 20px;
        }
        .btn_content button{
            height: 30px;
            width: 100px;
            font-size:16px;
            font-weight: bold;
            margin: 10px 25px;
            border-radius: 10px;
            border:0;
            background: pink;
            color: #000;
            outline: none; 
            opacity: 0.8;
            float: left;
        }
        .btn_content button:hover{
            opacity: 1;
        }
    </style>

jq:

<script type="text/javascript">
        $(function(){
            //生成按钮
            $("#sub").bind("click",function(){

                if($("#num").val()==""){
                    alert("数量不能为空");
                }
                else if(parseInt($("#num").val())!=$("#num").val()){
                    alert("数量只能是整数!")
                }
                else{
                    clear_plannel();
                    var btn_content = $("#btn_content")
                    for(var i=0;i<$("#num").val();i++){
                        btn_content.append("<button>按钮"+(i+1)+"</button>");
                        if( (i+1)%5 == 0 ){
                            btn_content.append("<br>")
                        }
                    }

                    //生成按钮的点击事件
                    var btn = $("#btn_content").find("button");

                    for(var i=0;i<btn.length;i++){
                
                        (function(m){
                            btn.eq(i).on("click",function(){
                                alert("您好!我是按钮<"+(m+1)+">");
                            })
                        })(i)
                    }

                }
            })

            //清除画布
            $("#clear").bind("click",function(){
                //clear_plannel();
            })

        })

        function clear_plannel(){
            $("#btn_content").html("");
        }
    </script>

 

由于博客园显示JQ效果，效果就展示不出来了。

感兴趣的话贴到代码编辑器上看看效果。感谢！

 

以上内容，如有错误请指出，不甚感激。