-1

При загрузке страницы показаны все элементы (в поле <div id="choise"> так же показаны все варианты) Когда выбираем показ определенных данных в поле "choise" должно выводиться только выбранное если отменить выбор все возвращается в исходное состояние.

document.querySelectorAll('[data-control]').forEach(item => {
  item.addEventListener('click', event => {
    event.preventDefault();
    handleFilterItems(item);
  });
});

function handleFilterItems(filterItem) {
  if (filterItem.getAttribute('data-control') === '' || filterItem.getAttribute('data-control') === '.all') {
    document.querySelectorAll('[data-control]').forEach(item => {
      item.classList.remove('_active');
    });
  } else {
    document.querySelector('[data-control=".all"]').classList.remove('_active');
  }
  if (filterItem.classList.contains('_active')) {
    filterItem.classList.remove('_active');
    // check if no other filter item is active
    if (!document.querySelectorAll('[data-control]._active').length) {
      document.querySelector('[data-control=".all"]').classList.add('_active');
    }
  } else {
    filterItem.classList.add('_active');
  }
  handleFilterTeaser();
}

function handleFilterTeaser() {
  document.querySelectorAll('.all').forEach(item => {
    item.classList.add('_hidden');
  });
  if (document.querySelectorAll('[data-control]._active').length === 0) {
    document.querySelectorAll('.all').forEach(item => {
      item.classList.remove('_hidden');
    });
  } else {
    document.querySelectorAll('[data-control]._active').forEach(item => {
      let filterTag = item.getAttribute('data-control');
      document.querySelectorAll(filterTag).forEach(tag => {
        tag.classList.remove('_hidden');
      });
    });
  }
}
ul,
li {
  list-style: none;
  display: inline-block;
}

button {
  padding: 10px;
}

button:hover {
  color: green;
}

button._active {
  color: tomato;
}

.list>div {
  background: grey;
  margin-bottom: 10px;
  color: #fff;
  padding: 10px;
}

._hidden {
  display: none;
}

.show-choice {
  width: max-content;
  border: 1px solid red;
  padding: 10px;
  margin: 0 0 20px;
}

._hidden {
  display: none;
}

.show-choice {
  width: max-content;
  border: 1px solid red;
  padding: 10px;
  margin: 0 0 20px
}
<div>
  <ul>
    <li>
      <button class="_active" data-control=".all">all</button>
    </li>
    <li>
      <button data-control=".a">a</button>
    </li>
    <li>
      <button data-control=".b">b</button>
    </li>
    <li>
      <button data-control=".c">c</button>
    </li>
  </ul>
  <div class="show-choice">
    <div id="choise">
      <span>a 1, b 2, a b 3, b 4, a 5, c 6</span>
    </div>
  </div>
</div>
<div class="list">
  <div class="all a">a 1</div>
  <div class="all b">b 2</div>
  <div class="all a b">a b 3</div>
  <div class="all b">b 4</div>
  <div class="all a">a 5</div>
  <div class="all c">c 6</div>
</div>

0

1 ответ 1

0
+50

Какая стоит конкретно проблема? - Я так и не понял. Но если нужно просто выводить соответствующие данные в область с красной рамочкой(назовем это так) - то следующее в принципе с задачей справляется.

html

      <div>
        <ul>
          <li>
            <button class="_active" data-control=".all">all</button>
          </li>
          <li>
            <button data-control=".a">a</button>
          </li>
          <li>
            <button data-control=".b">b</button>
          </li>
          <li>
            <button data-control=".c">c</button>
          </li>
        </ul>
        <div class="show-choice">
          <div id="choise">
            <div class="all a none">a 1</div>
            <div class="all b none">b 2</div>
            <div class="all a b none">a b 3</div>
            <div class="all b none">b 4</div>
            <div class="all a none">a 5</div>
            <div class="all c none">c 6</div>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="all a">a 1</div>
        <div class="all b">b 2</div>
        <div class="all a b">a b 3</div>
        <div class="all b">b 4</div>
        <div class="all a">a 5</div>
        <div class="all c">c 6</div>
      </div>

css

добавить в конец файла

.none {
    color: #000;
    background-color: #fff;
}

в блоке <div id="choise"> у вас стоит <span>a 1, b 2, a b 3, b 4, a 5, c 6</span> ваш js код не работает с содержимым span элемента. А .none в конце css файла - для того чтобы ваш существующий код не окрашивал значения в цвета из блоков ниже.

1
  • Так может это и нужно. Подождем самого автора. Что-то он теперь и нос не кажет. :(
    – ksa
    18 янв в 19:16

Ваш ответ

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

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