Как отработать функцию «по шаблону»?

Question

[Николай]

Приветствую!
Недавно начал осваивать JS + JQuery, и почти сразу возник вопрос: как можно, не дублируя функцию, обработать "по шаблону" несколько условий.
По факту: есть три вкладки, в каждой вкладке есть две формы ввода адреса: ОТ и ДО. И у каждой формы есть кнопка, которая добавляет ещё одно поле ввода. Что-то типа:

<div class="one">
  <input class="from1" name="from1[]"> <button class="add_from1">Add</button>
  <input class="where1" name="where1[]"> <button class="add_where1">Add</button>
</div>
<div class="two">
  <input class="from2" name="from2[]"> <button class="add_from2">Add</button>
  <input class="where2" name="where2[]"> <button class="add_where2">Add</button>
</div>
<div class="three">
  <input class="from3" name="from3[]"> <button class="add_from3">Add</button>
  <input class="where3" name="where3[]"> <button class="add_where3">Add</button>
</div>

$(".one .add_from1").on("click", function () {
  $(".one").append('<input class="from" name="from1[]">');
}

Как, и для второй. различия лишь в цифрах, идущих после ".from", ".where" и ".add"

Дак вот, что бы не дублировать, можно ли как-нибудь, по шаблону, создать функцию?

for(), как я понял, здесь, не особо подходит. Хотя могу ошибаться. Направьте , пожалуйста, юнлинга в правильное русло ;D

Надеюсь теперь описал более понятно)

Answer 1

[GreatRash]

Есть такой паттерн проектирования - делегирование. В вашем случае вам нужно делегировать событие клика.

Что это значит:
Мы вешаем обработчик клика не на кнопку, а на родителя кнопки (или вообще на документ к примеру). Далее в этом обработчике мы смотрим где у нас была мышка в момент клика (в JS для этого есть свойство Event.target) и в зависимости от этого выполняем какие-то действия.

Как это выглядит в jQuery:

$(document).on('click', 'button', function(e) {
  // этот код выполнится только если e.target === 'button'
});

Ну и не нужен вам изврат в виде .form1, .form2 и т.п. Используйте обыкновенные классы, без индексов.

Comments

[Николай]

Повторюсь:
Возможно, я не правильно описал задачу. Ну или не совсем понимаю ваше решение ;(
По факту: есть три вкладки, в каждой вкладке есть две формы ввода адреса: ОТ и ДО. И у каждой формы есть кнопка, которая добавляет ещё одно поле ввода. Что-то типа:

<div class="one">
  <input class="from1" name="from1[]"> <button class="add_from1">Add</button>
  <input class="where1" name="where1[]"> <button class="add_where1">Add</button>
</div>
<div class="two">
  <input class="from2" name="from2[]"> <button class="add_from2">Add</button>
  <input class="where2" name="where2[]"> <button class="add_where2">Add</button>
</div>
<div class="three">
  <input class="from3" name="from3[]"> <button class="add_from3">Add</button>
  <input class="where3" name="where3[]"> <button class="add_where3">Add</button>
</div>

Answer 2

[littleguga]

GreatRash дал хороший ответ. Но я посмею его немного дополнить.

1. Можно написать "общую" функцию для данной задачи: пощупать можно здесь

2. Нужно уметь разделять сущности. Если .form1 и .form2 уникальны, то тогда имеет смысл давать им разные классы(если они должны выглядеть по разному), если они выглядят одинаково, но должны вести себя по разному, то тогда лучше давать им разные id. В случае, если они и выглядят и ведут себя одинаково, то можно дать просто общий класс .form/.add.

Comments

[Николай]

Возможно, я не правильно описал задачу. Ну или не совсем понимаю ваше решение ;(
По факту: есть три вкладки, в каждой вкладке есть две формы ввода адреса: ОТ и ДО. И у каждой формы есть кнопка, которая добавляет ещё одно поле ввода. Что-то типа:

<div class="one">
  <input class="from1" name="from1[]"> <button class="add_from1">Add</button>
  <input class="where1" name="where1[]"> <button class="add_where1">Add</button>
</div>
<div class="two">
  <input class="from2" name="from2[]"> <button class="add_from2">Add</button>
  <input class="where2" name="where2[]"> <button class="add_where2">Add</button>
</div>
<div class="three">
  <input class="from3" name="from3[]"> <button class="add_from3">Add</button>
  <input class="where3" name="where3[]"> <button class="add_where3">Add</button>
</div>

[littleguga]

Николай: поле ввода, которое нужно добавить чем-то отличается от тех, что уже есть?

[Николай]

littleguga: нет вроде)

[littleguga]

Николай: тогда мой ответ подходит. Попробую его подробнее расписать.
Классы нужны для управления стилем элементов(думаю, Вы это понимаете). Если элементы выглядят одинаково, то мы можем использовать один класс для них.

<div class="one">
  <input class="from" name="from1[]"> <button class="add_from">Add</button>
  <input class="where" name="where1[]"> <button class="add_where">Add</button>
</div>
<div class="two">
  <input class="from" name="from2[]"> <button class="add_from">Add</button>
  <input class="where" name="where2[]"> <button class="add_where">Add</button>
</div>
<div class="three">
  <input class="from" name="from3[]"> <button class="add_from">Add</button>
  <input class="where" name="where3[]"> <button class="add_where">Add</button>
</div>

Так как все кнопки для добавления поля from выглядят одинаково, то у них будет один класс "add_from", тоже самое и для кнопок "add_where".
Так как все input для from выглядят одинаково, у них будет один класс "from", аналогично и для "where"

[littleguga]

Николай: теперь посмотрим на name, в нем у нас содержится название переменной, в которую будет записано значение input'a. Квадратные скобки значат, что from1 это массив. Например, мы добавим еще 2 поля(у нас получится 3 поля). В массиве from1 php увидит 3 переменные, каждая соответствующая значению input'a.

[littleguga]

Николай: теперь про поведение: при нажатии на кнопку Add нам нужно добавить еще один инпут нашему родителю(например, при нажатии на add_from в three мы добавляем инпут <input class="from" name="from3[]"> в div с классом three

[littleguga]

Николай: теперь подумаем, а как это можно подвести под шаблон? И тогда получится код, который в ответе.

Если есть еще вопросы, то задавайте, буду рад помочь :)

[Николай]

littleguga: вроде понял) Спасибо за разжёвывание ;D