jquery用each()动态创建元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="/Script/jquery-1.3.2-vsdoc2.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            addPic();
            delPic();
        })
        var i = 0;
        //增加图片
        function addPic() {
            $(".addpic").bind('click', function () {
                //控制生成多少个元素 从0开始
                if (i < 2) {
                    //先创建type对象
                    $(" <input/>").attr("class", "UpFile").attr("type", "file").appendTo("#picCont");
                    //然后在动态循环绑定ID号
                    $(".UpFile").each(function (i) {
                        this.id = "File_" + i;
                    })
                    i++;
                }
                else {
                    alert("不能再添加了");
                }
            });
        }
        //减少图片
        function delPic() {
            $(".delpic").bind("click", function () {
                if (((i + 1) - 1) > 0) {
                    //减少元素
                    $("#File_" + i).remove();
                    i--;
                }
                else {
                    alert("请保留一个");
                }
            })
        
        }
    </script>
</head>
<body>
    <a class="addpic">增加图片</a> <a class="delpic">减少图片</a>
    <div id="picCont">
        <input type="file" class="UpFile" />
    </div>
</body>
</html>
posted @ 2012-04-20 10:45  清凉的风/2.0  阅读(464)  评论(0)    收藏  举报