-1

Как можно создать динамические поля при клике на элемент (к примеру, список)?

Задача заключается в том, что при выборе любой операции должны появиться поля для заполнения + описание. Естественно, если мы перешли на "Факториал", а были на "Степень", то поля факториала удаляются.

Для проверки нажмите на "Мат. Выч - Факториал".

А также как исправить то, что при повторном нажатии на "Факториал" бесконечно появляются поля?

$('ul li').click(function() { 
    $(this).children("ul").toggle();
    return false;
})

$("#mat-2").click(function() {
   $("<p>Вычисление факториала: Pn=n! </p><span>Введите число - </span>").appendTo('#test');
   $("<input type='text' id='texts' name='texts'><br> ").appendTo('#test');
   $("<input type='button' name='enter' id='enter' value = 'Вычислить'> ").appendTo('#test');

    $("#enter").click(function() {
        var n = $("#texts").val();
        var funcVal = fact(n);
        $(".result").text(funcVal);
    }); 

    function fact(n) {
        if (n == 1)
            return(1);   
        if (n > 1)
            return(n * fact(n - 1));    
        return(-1); 
    } 
});
  a { text-decoration: none; font-weight: bold; }
  #main { 
      width: 602px;
      height: 300px; 
      border: 1px solid #E0EBEB ;
      position: absolute; 
      top: 50%; 
      left: 50%;      
      margin: -100px 0 0 -301px;      
      background: #60a839;}
  #menu { 
      padding: 0; 
      margin: 0; 
      font-family: Georgia; 
  }
  #menu li {
    float: left;
    padding: 0;
    width: 200px;
    position: relative;
    transition:background 0.2s ease;
    border: 1px solid #333;
    border-left: none;
    border-right: none;
  }
  #menu li:hover{
    background: #B9D0D0
  }
  #menu li ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      display: none;
      position: absolute;
      left: 0;
      top: 31px;
      background: #E0EBEB;
    }

  #menu li ul li:hover{
   background: #B9D0D0;
   cursor: pointer;
  }

    #menu li ul li {
    height: 26px;
    margin: 0;
    text-align: left;
    border: 0;
  }

  #nav { 
      position: relative; 
      width: 100%; 
      float: left; 
      background: #E0EBEB;
  }
  
  #nav li { 
      list-style: none; 
      text-align: center; 
  }
  #nav li a { 
      display: block; 
      padding: 0; 
      border-left: none; 
      border-right: none; 
      line-height: 30px; 
      font-size: 19px; 
      font-family: Trebuchet MS; 
      color: #000; 
  }
  <div id="main">
    <div id="nav">
      <ul id="menu">
        <li class="mat">
          <a href="#"><span>Мат. вычисления</span></a>
          <ul class="mat">
            <li id="mat-1">Степень</li>
            <li id="mat-2">Факториал</li>
          </ul>
        </li>
        <li class="pl">
          <a href="#"><span>Площадь</span></a>
          <ul>
            <li id="pl-1">Треугольник</li>
            <li id="pl-2">Квадрат</li>
            <li id="pl-3">Прямоугольник</li>
            <li id="pl-4">Эллипс</li>
            <li id="pl-5">Ромб</li> 
          </ul>
        </li>
        <li class="ob">
          <a href="#"><span>Объем</span></a>
          <ul>
            <li id="ob-1">Куб</li>
            <li id="ob-2">Конус</li> 
            <li id="ob-3">Пирамида</li>
            <li id="ob-4">Параллелепипед</li>
            <li id="ob-5">Цилиндр</li>
          </ul>
        </li>                

      </ul>
    </div>
      <div id="test"></div>
      <span class="result"></span>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • 2
    Исправил вашу ссылку на jsfiddle на встроенный js-snippet. В будущем, пожалуйста, оформляйте код именно так.
    – Nick Volynkin
    7 сен 2015 в 5:37

1 ответ 1

6

Перед тем как отобразить новые поля можно просто очищать форму.
Добавьте $("#test").empty() в начале метода, чтобы очистить форму.
Например, здесь форма не дублируется при нескольких нажатиях.

Но, по моему мнению, ваше решение не совсем корректно и очень неудобное в разработке и поддержке. В результате, у вас будет очень громоздкий код, содержащий большое количество динамически генерируемого кода - его будет тяжело редактировать и еще более тяжело дебажить.

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

Вот небольшой работающий пример на JSFiddle. В этом примере при добавлении новых форм новый JavaScript код писать не нужно! Функция $("#menu li[data-form]").click обрабатывает нажатия на все кнопки - нужно только добавить поле с соответствующим id в #test. Для проверки можно нажать на Мат. операции - Степень и Мат. операции - Факториал. Обратите внимание на изменение структуры HTML.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.