@Monachdg

Как заменить добавляемый display:block через javascript на display:flex?

Добрый день!
Прошу не ругаться, что можно было гуглить и т.п.
Есть слайдер, который при нажатии на кнопку выводит по очереди UL списки. Спискам задан display:flex, что и хотелось в итоге сохранить структуру сетки. Так вот, при нажатии на добавить список, в UL вставляется скриптом display:block, что в итоге рушить всю конструкцию. Как подправить код, чтобы flex вместо block вставлялся?
Можно в этом коде сделать кнопку закрыть предыдущее поле и стереть с него данные при закрытии, и чтобы кнопка "Добавить" не появлялась когда все поля заполнены.

Что в итоге получаю: из-за block сетка поползла..
5e4b9ef7b8bd9809796229.png
Сам код:
<!-- Block 1-->
          <ul class="ingredient-b hiden_box">
            <li class="input-ingr">Тут текст</li>
            <li class="input-kol">Тут текст</li>
            <li class="select-ingredient">Тут текст</li>
          </ul> 
          <!-- Block 2-->
          <ul class="ingredient-b hiden_box">
            <li class="input-ingr">Тут текст</li>
            <li class="input-kol">Тут текст</li>
            <li class="select-ingredient">Тут текст</li>
          </ul>   
           <!-- Block 3-->
          <ul class="ingredient-b hiden_box">
            <li class="input-ingr">Тут текст</li>
            <li class="input-kol">Тут текст</li>
            <li class="select-ingredient">Тут текст</li>
          </ul>   
          <!-- Block 4-->
          <ul class="ingredient-b hiden_box">
            <li class="input-ingr">Тут текст</li>
            <li class="input-kol">Тут текст</li>
            <li class="select-ingredient">Тут текст</li>
          </ul> 
          <!-- Block 5-->
          <ul class="ingredient-b hiden_box">
            <li class="input-ingr">Тут текст</li>
            <li class="input-kol">Тут текст</li>
            <li class="select-ingredient">Тут текст</li>
          </ul> 

           <span class="btn-next_block btn">Добавить еще</span>


.input_remove {display: none;}
          .ingredient-b {
	     display: flex;
	     justify-content: space-between;
             position: relative;
             list-style: none;
            margin: 0;
            padding: 0;}
         .ingredient-b li {
            width:30%;}


// СПОЙЛЕР С БЛОКАМИ ИНГРЕДИЕНТОВ  
  $('.btn-next_block ').click(function() {
  // показать первый скрытый по порядку
  $('.ingredient-b:hidden').eq(0).show();
  // скрыть кнопку при отсутствии скрытых элементов
  $('.ingredient-b:hidden').length<1 ? $('.btn-next_block').hide() : false;});

  // Удаляем класс у родителя если (input - value"") заполнен и не скрываем спойлер для показа всех ингредиентов  при редактировании
  $('.input-ingr input').each(function() {
  $(this).closest('.hiden_box').toggleClass('input_remove', !this.value);
});
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
.show() выполняет .css('display', 'block');, следовательно можно сделать так: .css('display', 'flex');, а вместо .hide:
.css('display', 'none');. Но лучше сделать доп. класс и тоглить его.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Минск
от 2 800 до 3 300 $