Question

我正在创建一个单页网站，其布局由水平滑动部分组成。每个部分的末尾都有一个复杂的形式。各个部分之间的表单总是相同的，如果其中的一部分被填充，则所有部分都会出现更改。

我的问题是：对此最好的方法是什么？

我希望网站尽可能轻量级，因为它意味着在非常不发达的国家/地区使用。（到目前为止我还没有要求jquery，但它仍然是一个选项）。

到目前为止，我最好的想法是在页面加载时复制表单，但是当用户修改表单时，需要加载脚本来实时更新每个表单。

是否有可能只镜像一个div？表单的所有实例实际上都是在多个地方出现的同一个div？

Answer 1

输入的数据在更改时复制了吗？

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bla!</title>
        <style type='text/css'>
        </style>
        <script type='text/javascript'>
            function duplicate(object) {
                var data = object.value;
                inputs = document.getElementsByName(object.name);
                for (var i in inputs) {
                    var input = inputs[i];
                    input.value = data;
                }
            }
        </script>
    </head>
    <body class='body' >
        <div id='div1'>
            <h2>Form1</h2>
            <form>
                <input onchange='duplicate(this);' name='input1'>
                <input onchange='duplicate(this);' name='input2'>
                <input onchange='duplicate(this);' name='input3'>
            </form>
        </div>
        <div id='div2'>
            <h2>Form2</h2>
            <form>
                <input onchange='duplicate(this);' name='input1'>
                <input onchange='duplicate(this);' name='input2'>
                <input onchange='duplicate(this);' name='input3'>
            </form>
        </div>
        <div id='div3'>
            <h2>Form3</h2>
            <form>
                <input onchange='duplicate(this);' name='input1'>
                <input onchange='duplicate(this);' name='input2'>
                <input onchange='duplicate(this);' name='input3'>
            </form>
        </div>

    </body>
</html>

一个div在一个页面上的多个位置镜像

1 个答案: