jquery 示例 - todolist(计划列表)实例

Devops海洋的渔夫

发布于 2019-05-30 21:54:53

1.3K0

发布于 2019-05-30 21:54:53

文章被收录于专栏：Devops专栏Devops专栏

功能说明

在文本框输入内容，点击增加按钮，则下方的列表会增加添加项
点击删除按钮，则删除该项
点击向下箭头，位置顺序就往下调整
点击向上箭头，位置顺序就往上调整

首先实现基本HTML+CSS

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        .todolist_con{
            width: 300px;
            height: 100%;
            /*background: gold;*/
            margin: 50px auto 0;
            padding: 10px;
        }

        .todolist_con h2{
            margin: 10px;
        }

        .todolist_con ul{
            list-style: none;
        }

        .todolist_con ul li{
            margin: 10px;
            position: relative;
            border-bottom: 2px solid #ccc;
        }

        .todolist_con ul li a{
            position: absolute;
        }

        .todolist_con ul li .delete{
            right: 50px;
        }

        .todolist_con ul li .down{
            right: 30px;
        }

        .todolist_con ul li .up{
            right: 10px;
        }

        .todolist_con .txt{
            margin-left: 11px;
        }
    </style>
</head>
<body>
    <!-- div.todolist_con>h2{To do list}+input.txt+input -->
    <div class="todolist_con">
        <h2>To do list</h2>
        <input type="text" class="txt">
        <input type="button" value="增加" class="add">
        <!-- ul>li{学习html}>a{删除}+a{?}+a{?} -->
        <ul>
            <li>学习html
                <a href="javascript:;" class="delete">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
            <li>学习css
                <a href="javascript:;" class="delete">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
            <li>学习javascript
                <a href="javascript:;" class="delete">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
        </ul>
    </div>
</body>
</html>

在文本框输入内容，点击增加按钮，则下方的列表会增加添加项

    <script type="text/javascript">
        $(function(){
            $('.add').click(function(){
                var $content = $('.txt').val();

                if ($content == "") {
                    alert("输入内容不能为空");
                    return;
                }

                // console.log($content);
                // 当content内容不为空，那么则可以新增一个节点
                var $li = ' \
                        <li>' + $content + ' \
                        <a href="javascript:;" class="del">删除</a> \
                        <a href="javascript:;" class="down">?</a> \
                        <a href="javascript:;" class="up">?</a> \
                        </li> \
                    '
                // console.log($li);

                $("ul").append($li);
                
            })
        })
    </script>

点击删除按钮，则删除该项

            // 删除元素
            $(".del").click(function(){
                // alert('click del');
                $(this).parent().remove();
            })

但是这种写法存在一个问题，就是新增加的li标签是无法删除的。这种情况就需要才用事件委托给ul来处理比较好了。

使用事件委托的方式，解决新增li标签无法删除的问题

从上面的四个图可以看出，事件委托已经监听成功，就算是新增的li标签内的a元素都可以监听到。并且可以获取点击a的class属性。那么下面就可以根据这个class属性进行判断是点击哪个，然后进行相应的操作即可。首先编写删除的操作。

点击向下箭头，位置顺序就往下调整

向下的则是将当前的li设置在next() li标签的后面即可。

点击向下就向下了。

点击向上箭头，位置顺序向上调整

但是向上和向下都有点缺陷，就是没有限制到顶部或者到底部的处理事项。

设置到顶部和到底部的事项

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.add').click(function(){
                var $content = $('.txt').val();

                if ($content == "") {
                    alert("输入内容不能为空");
                    return;
                }

                // console.log($content);
                // 当content内容不为空，那么则可以新增一个节点
                var $li = ' \
                        <li>' + $content + ' \
                        <a href="javascript:;" class="del">删除</a> \
                        <a href="javascript:;" class="down">?</a> \
                        <a href="javascript:;" class="up">?</a> \
                        </li> \
                    '
                // console.log($li);

                $("ul").append($li);
                
            })

            // 删除元素
            // $(".del").click(function(){
            //  // alert('click del');
            //  $(this).parent().remove();
            // })

            $('.todolist_con ul').delegate('a','click',function(){
                // alert($(this).prop('class'));

                var $handler = $(this).prop('class');

                if ($handler=="del") {
                    $(this).parent().remove();
                }

                if ($handler=="down") {

                    if ($(this).parent().next().length==0) {
                        alert('到底部了！')
                        return;
                    }

                    $(this).parent().insertAfter($(this).parent().next());
                }

                if ($handler=="up") {
                    if ($(this).parent().prev().length==0) {
                        alert('到顶部了！')
                        return;
                    }

                    $(this).parent().insertBefore($(this).parent().prev());
                }
            })
        })
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        .todolist_con{
            width: 300px;
            height: 100%;
            /*background: gold;*/
            margin: 50px auto 0;
            padding: 10px;
        }

        .todolist_con h2{
            margin: 10px;
        }

        .todolist_con ul{
            list-style: none;
        }

        .todolist_con ul li{
            margin: 10px;
            position: relative;
            border-bottom: 2px solid #ccc;
        }

        .todolist_con ul li a{
            position: absolute;
        }

        .todolist_con ul li .del{
            right: 50px;
        }

        .todolist_con ul li .down{
            right: 30px;
        }

        .todolist_con ul li .up{
            right: 10px;
        }

        .todolist_con .txt{
            margin-left: 11px;
        }
    </style>
</head>
<body>
    <!-- div.todolist_con>h2{To do list}+input.txt+input -->
    <div class="todolist_con">
        <h2>To do list</h2>
        <input type="text" class="txt">
        <input type="button" value="增加" class="add">
        <!-- ul>li{学习html}>a{删除}+a{?}+a{?} -->
        <ul>
            <li>学习html
                <a href="javascript:;" class="del">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
            <li>学习css
                <a href="javascript:;" class="del">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
            <li>学习javascript
                <a href="javascript:;" class="del">删除</a>
                <a href="javascript:;" class="down">?</a>
                <a href="javascript:;" class="up">?</a>
            </li>
        </ul>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.04.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html