Что делать, если сохраняется active для link?

Question

Имеется фильтр линков и скрипт:

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filter");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

var btnContainer = document.getElementById("filterContainer");
var btns = btnContainer.getElementsByClassName("list-link");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

<ul id="filterContainer" class="list-inline text-center portfolio-filter">
  <li class="list-inline-item">
    <a class="list-link active" onclick="filterSelection('all')">Все</a>
  </li>
  <li class="list-inline-item">
    <a class="list-link" onclick="filterSelection('development')">Верстка</a>
  </li>
  <li class="list-inline-item">
    <a class="list-link" onclick="filterSelection('redisign')">Редизайн</a>
  </li>
</ul>

При нажатии на "Верстка" или "Редизайн" класс active сохраняется. Что делать?

Answer 1

Евгений, почему бы не посмотреть в сторону использования es6? Вот так бы выглядел Ваш скрипт:

const links = document.querySelectorAll('#filterContainer a.list-link');

links.forEach(link =>{
    link.addEventListener('click', event => {
        
        const filter = event.currentTarget.dataset.filter;

        links.forEach(unactive => unactive.classList.remove('active'))

        event.currentTarget.classList.add('active');

        document.querySelectorAll('.filter').forEach( item => {
            item.classList[( filter === 'all' || item.classList.contains(filter) ? 'add' : 'remove')]('show')

        })
    })
})

Да, у DOM-элементов есть свойство classList https://developer.mozilla.org/ru/docs/Web/API/Element/classList В работе Вашей функции - незаменимая вещь.

Вот "подправленный" html, на котором я проверял работу своего скрипта:

<ul id="filterContainer" class="list-inline text-center portfolio-filter">
    <li class="list-inline-item">
        <a class="list-link active" data-filter="all" href="#">Все</a>
    </li>
    <li class="list-inline-item">
        <a class="list-link" data-filter="development" href="#">Верстка</a>
    </li>
    <li class="list-inline-item">
        <a class="list-link" data-filter="redisign" href="#">Редизайн</a>
    </li>
</ul>

<div class="filter">1</div>
<div class="filter development">2</div>
<div class="filter redisign">3</div>
<div class="filter development redisign">4</div>

Ещё немного ссылок, возможно Вам пригодится:

const и let: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/const

addEventListener: https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener

Стрелочные функции: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions

БЛОГ НА HUSL

Что делать, если сохраняется active для link?

Ответы (1 шт):