Задать вопрос
@cdfgharweer33
javascript

Как удалять и создавать блоки в js?

На странице имеется 3 блока:
<div class="text_block_1">
<div class="text_block_2">
<div class="text_block_3">

При нажатии на кнопку "закрыть" на одном из этих блоков, блок, на котором мы нажали эту кнопку, уезжает в сторону и исчезает, а на его месте должен появиться новый блок с class предыдущего блока. Как сделать этот код универсальным под любой блок (чтобы, если мы удаляли блок _3, он исчезал и на его месте появлялся другой с тем же id)? И чтобы блок появлялся не снизу, а на месте предыдущего?
$(document).ready(function(){
    $('.icon-close').click(function(){
        $('.text_block_1').addClass('hide');
        $('.content-blocks').append(' <div class="text_block_1">другой текст, отличный от предыдущего блока</div>')
    });
    });
  • Вопрос задан
  • 370 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
@detriat
...
Решение примерно такое должно быть. Если хотите лучший ответ, сформулируйте более конкректный вопрос
$(document).ready(function(){
    $('.icon-close').click(function(){
        $('.text_block_1').addClass('hide'); // здесь можно вызвать метод hide() || fadeOut() 

        const index = $(this).attr('data-index');
        const temp_text = $(`.class_name${index}`).text();
        $('.content-blocks').append(`<div class="text_block_${index}">${temp_text}</div>`);
    });
    });
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
YumeReaver
@YumeReaver
Бургомистр
JSFiddle
$(".close").click(function(){
			let next_block = $(this).parent().next();
      $(this).parent().hide("slow", function(){ // Callback-Функция после анимации hide()
      	next_block.show("fast");
      })
});

Parent - это потому что у меня кнопка закрытия внутри блока.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Рефакторинг и оптимизация кода Python проекта
25 апр. 2024, в 00:17
1500 руб./в час
Обновление веб-интерфейса согласно UI дизайну проекта
25 апр. 2024, в 00:15
1500 руб./в час
Переложить планировщик задач в веб-интерфейс
24 апр. 2024, в 23:57
1200 руб./в час
Ещё заказы