@cdfgharweer33

Как удалять и создавать блоки в 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>')
    });
    });
  • Вопрос задан
  • 331 просмотр
Решения вопроса 1
Решение примерно такое должно быть. Если хотите лучший ответ, сформулируйте более конкректный вопрос
$(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>`);
    });
    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 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 - это потому что у меня кнопка закрытия внутри блока.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы