编辑保存

最新推荐文章于 2022-02-24 14:53:09 发布

吴机智

最新推荐文章于 2022-02-24 14:53:09 发布

阅读量88

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108474391

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        i,
        em {
            font-style: normal;
            display: none;
            color: #0000ff;
            margin: 0 5px;
            cursor: pointer;
        }

        a {
            color: #0000ff;
            display: inline-block;
            cursor: pointer;
        }

        input {
            border: none;
            font-size: 16px;
            width: 250px;
            outline: none;
        }
    </style>
</head>

<body>
    <ul>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
        <li><input type="text" name="" value="javascript权威指南编辑" readonly><a>编辑</a><i>保存</i><em>取消</em></li>
    </ul>
    <script>
        /* 
            1. 分析重复的页面布局, 每一个li中内容是一致的
            2. 获取重复布局最大的父节点
            3. 所有的小的按钮和功能全部通过父节点进行获取和操作
            4. 先实现一个父元素中的所有功能

        */
        // 效果实现： 点击编辑按钮, 将当前输入框变成可编辑的, 隐藏编辑按钮, 显示保存、取消按钮, 点击保存按钮, 保存输入框的值, 点击取消保存按钮, 返回上一次保存的值
        // 获取元素
        var lis = document.getElementsByTagName('li');
        console.log(lis);

        // move(lis[0]);
        // move(lis[1]);
        // move(lis[2]);

        for(var i = 0; i < lis.length; i++){
            move(lis[i]);
        }

        function move(fa) {
            // 获取元素
            var inp = fa.getElementsByTagName('input')[0];
            var a = fa.getElementsByTagName('a')[0];
            var i = fa.getElementsByTagName('i')[0];
            var em = fa.getElementsByTagName('em')[0];
            console.log(inp, a, i, em);
            // 点击编辑按钮, 将当前输入框变成可编辑的, 隐藏编辑按钮, 显示保存、取消按钮
            // 点击编辑按钮，获取到当前输入框的内容, 就是上一次保存、取消的结果
            var text = '';
            a.onclick = function () {
                this.style.display = 'none';
                i.style.display = 'inline-block';
                em.style.display = 'inline-block';
                inp.readOnly = false;
                text = inp.value;
            }
            // 点击保存, 输入框变成只读, 显示编辑按钮, 隐藏保存\取消按钮
            i.onclick = function () {
                this.style.display = 'none';
                a.style.display = 'inline-block';
                em.style.display = 'none';
                inp.readOnly = true;
            }
            // 取消按钮, 输入框变成只读, 显示编辑按钮, 隐藏保存\取消按钮, 输入框的内容变成上一次保存的内容
            em.onclick = function () {
                this.style.display = 'none';
                a.style.display = 'inline-block';
                i.style.display = 'none';
                inp.readOnly = true;
                console.log(text);
                inp.value = text;
            }
        }
    </script>
</body>

</html>