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

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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