Компактно написать Jquery?

Question

[Mr. Pavlyukov]

Есть такой код:

$(function(){
  $("#row1 .project__add").click(function(event){
    $('.table__row--child').insertAfter('#row1').slideToggle();
    $('#row1 .fa-stack').children('i:last-child').toggleClass('fa-minus');
  })
});

Есть такие id до 20, у всех если что есть общий класс.

<tr id="row1" class="table__row">

Как написать общий цикл, чтобы не писать такое для каждого ID? Нужно, чтобы когда ты нажимал на каждый ID, открывался общий для всех подблок.

Answer 1

[Сергей delphinpro]

var $rows = ...; // Блок в котором лежит все остальное
$('.project__add').click(function(){
    var $row = $(this).parents('[id^=row]');// тут лучше использовать общий класс
    $('.table__row--child').insertAfter($row).slideToggle();
    var $icon = $row.find('.fa-stack').children('i:last-child');
    $rows.find('.fa-stack').children('i:last-child').not($icon).removeClass('fa-minus'); 
    $icon.toggleClass('fa-minus');
});

Comments

[Mr. Pavlyukov]

о, просто огромное спасибо.
Можно тогда еще вопрос? У меня есть здесь font awesome icon который меняется с + на -. Отрабатывает хорошо когда я закрываю открываю row, но мне еще нужно чтобы когда например, открыт первый row и я открываю второй - первый не просто закрывался, а чтобы - снова менялся на +. Не подскажете с этим?

[Mr. Pavlyukov]

Внес исправления, но тогда он не закрывается когда я просто принудительно хочу его закрыть. При нажатии на -

[Сергей delphinpro]

Mr. Pavlyukov: обновил ответ

[Mr. Pavlyukov]

Сергей: смотрите еще момент, когда я делаю клик, оно вставляет эти рядки, но плавности вообще нет. Хотя в консоли видно, что оно по идее срабатывает. Высота меняется. Не подскажете, в чем может быть дело?

Answer 2

[Влад]

Привет! Может дать им общий класс и использовать $(this) как вариант?

UPD. Или создать общую функцию и установить атрибут onClick="".

Comments

[Mr. Pavlyukov]

Привет! Заказчик не хочет вообще JS в коде. Даже OnClick

[Влад]

Тогда 1 вариант. 100%