Один div отражен в нескольких местах на одной странице

0

Я делаю одностраничный сайт с раскладкой из горизонтально раздвижных секций. В конце каждого раздела есть несколько сложная форма. Форма всегда одна и та же между разделами, и если бит ее заполняется одним, изменения должны отображаться во всех.

Мой вопрос: какой лучший подход для этого?

Я хочу, чтобы сайт был как можно более легким, поскольку он предназначен для использования в очень слаборазвитых странах. (Мне пока не нужно требовать jquery, но это все еще вариант).

Моя лучшая идея до сих пор реплицирует форму на загрузку страницы, но для загрузки каждой из них потребуются множество сценариев для обновления каждой формы, когда пользователь ее модифицирует.

Разве нет возможности просто зеркально отобразить div? Что все экземпляры формы на самом деле будут одним и тем же div unic, появляющимся в нескольких местах?

  • 0
    Вы используете какой-либо серверный язык? Большинство языков (ASP.Net, CakePHP, PHP) позволяют создавать элементы управления (или шаблоны, представления и т. Д.), Которые можно создавать один раз, но можно копировать и вставлять на страницу несколько раз. Как текстовое поле имеет один класс, но несколько экземпляров, так и ваш контроль.
  • 0
    И .clone (), и «вставка нескольких элементов» являются очень статичными решениями, и оба не оптимальны для времени загрузки. То, что я ищу, это способ, чтобы все экземпляры всегда были идентичны, даже во время взаимодействия. Как будто это была одна и та же униническая форма, увиденная в разных местах.
Теги:

1 ответ

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>
Поделиться
  • 0
    Это выглядит достаточно просто. Большинство моих входных данных являются радиоприемниками, хотя с этим методом было бы немного проще (я должен либо выполнить итерацию по множеству, либо использовать queryselector). Что мне действительно не нравится в том, чтобы на самом деле дублировать всю форму, так это то, что я использую метки для обозначения своих радиовходов для стилизации, поэтому нужны идентификаторы. Если я дублирую, мне нужно либо подправить идентификаторы (кажется ненужным js), либо жить с несколькими одинаковыми идентификаторами ...
  • 0
    Теперь я понимаю, что это, вероятно, самый легкий ответ, какой только может быть.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню