1

Всем здравствуйте! Пытаюсь решить фильтрацию блоков при помощи data-toggle, хочу сделать фильтр как на сайте DNS. Немалыми усилиями, пришла к этой части. Блоки скрываются и появляется нужная часть. Прошу помощи, т.к. уже сама решить не в силах. Проблемы заключаются в том, что при выводе блоков он не учитывает полное совпадение data-toggle и кнопку показать он выводит после каждого активированного чекбокса. Я не могу даже представить как должны выглядеть условия.

$('.checkbox-filter').ready(function() {
  $('.checkbox-input').change(function() {
    var dat = $(this).attr('data-toggle');
    if ($(this).is(':checked')) {
      $('.item-card').addClass('hidden')
      $('.' + dat).addClass('visible'); //условие
      $(this).closest('.content-wrapper').find('.filter-button-absolute').show();
    } else {
      $('.item-card').removeClass('hidden');
      $('.' + dat).removeClass('visible');
      $(this).closest('.content-wrapper').find('.filter-button-absolute').hide();
    }
  });
});
.hidden {
  display: none;
}

.visible {
  display: block;
}

.item-card {
  flex-basis: 24%;
  width: 100%;
  height: 300px;
}

.catalog-content {
  display: flex;
}

.catalog-filters {
  flex-basis: 30%;
}

.catalog-products {
  flex-basis: 65%;
}

.catalog-products-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.filter-button-absolute {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="catalog" id="hacker-list">
    <div class="catalog-content">
      <div class="catalog-filters">
        <h2>Фильтр</h2>
        <div class="filter-group">
          <h3>Value</h3>
          <div class="content-wrapper">
            <button class="filter-button-absolute">Показать</button>
            <div class="content">
              <span class="sort-range">
                <input type="text" placeholder="От" name="rangemin">
                —
                <input type="text" placeholder="До" name="rangemax">
              </span>
            </div>
          </div>
          <h3>option</h3>
          <div class="content-wrapper">
            <button class="filter-button-absolute">Показать</button>
            <div class="content">
              <span class="sort-range">
                <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op1" class="checkbox-input">
                  <span class="checkbox-content">
                    option1
                  </span>
              </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op2" class="checkbox-input">
                  <span class="checkbox-content">
                    option2
                  </span>
                </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op3" class="checkbox-input">
                  <span class="checkbox-content">
                    option3
                  </span>
                </label>
              </span>
            </div>
          </div>
          <h3>option1</h3>
          <div class="content-wrapper">
            <button class="filter-button-absolute">Показать</button>
            <div class="content">
              <span class="sort-range">
                <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op1.1" class="checkbox-input">
                  <span class="checkbox-content">
                    option1.1
                  </span>
              </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op2.1" class="checkbox-input">
                  <span class="checkbox-content">
                    option2.1
                  </span>
                </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op3.1" class="checkbox-input">
                  <span class="checkbox-content">
                    option3.1
                  </span>
                </label>
              </span>
            </div>
          </div>
          <h3>option2</h3>
          <div class="content-wrapper">
            <button class="filter-button-absolute">Показать</button>
            <div class="content">
              <span class="sort-range">
                <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op1.2" class="checkbox-input">
                  <span class="checkbox-content">
                    option1.2
                  </span>
              </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op2.2" class="checkbox-input">
                  <span class="checkbox-content">
                    option2.2
                  </span>
                </label>
              <label class="checkbox-filter">
                  <input type="checkbox" data-toggle="op3.2" class="checkbox-input">
                  <span class="checkbox-content">
                    option3.2
                  </span>
                </label>
              </span>
            </div>
          </div>
          <button class="filter-button filter-button-orange">Применить</button>
          <button class="filter-button filter-button-grey" data-filter="all">Сбросить</button>
        </div>
      </div>
      <div class="catalog-products">
        <div class="catalog-products-wrapper" id="catalog">
          <div class="item-card op1.1 op1.2 op1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, quas.
          </div>
          <div class="item-card op2.1 op.2.2 op2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, alias.
          </div>
          <div class="item-card op3.1 op3.2 op3">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam, voluptates!
          </div>
          <div class="item-card op1.1 op1.2 op1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, optio.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

5
  • Кнопка "показать" должна появиться если хотя бы один чекбокс из трех отмечен... и пропадать, если уберут галочку со всех, ага? Ну например можно изначально её добавить в HTML и скрыть... а вместо append / remove использовать show / hide. Commented 28 февр. 2020 в 2:41
  • @OPTIMUSPRIME Так и надо делать.
    – user176262
    Commented 28 февр. 2020 в 2:44
  • Тут есть маленький момент, забыла уточнить что эта кнопка должна появляться в том блоке где происходили изменения на чекбоксах. Точнее нажат checkbox в option, то появляется там и всего один, а у меня на каждом(( и так для option1 и option2
    – Ольга
    Commented 28 февр. 2020 в 2:44
  • @Ольга Добавьте по такой кнопке с display:none; в каждый .content-wrapper, а потом $(this).closest('.content-wrapper').find('.filter-button-absolute').show()/hide();.
    – user176262
    Commented 28 февр. 2020 в 2:46
  • Спасибо помогло, можно тогда еще вопрос, касательно этой же кнопки. Как сделать так что бы при условии нажатия в другом блоке в этом она пропадала?
    – Ольга
    Commented 28 февр. 2020 в 2:51

1 ответ 1

0

Как сделать так что бы при условии нажатия в другом блоке в этом она пропадала?

var thisFilterButton = $(this).closest('.content-wrapper').find('.filter-button-absolute');
$('.filter-button-absolute').not(thisFilterButton).hide();
2
  • Спасибо, по крайней мере четверть проблем удалось решить
    – Ольга
    Commented 28 февр. 2020 в 3:55
  • Теперь, есть момент который, я попыталась все же решить сама. Как восстановить состояние кнопки до активации и после деактивации чекбокса.
    – Ольга
    Commented 28 февр. 2020 в 7:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.