Неправильная фильтрация списка HTML

#javascript #html

#javascript #HTML

Вопрос:

Я настраиваю систему фильтрации на своем веб-сайте с помощью кнопок, которые фильтруют изображения ниже, и я столкнулся с проблемой. Когда я пытаюсь отфильтровать, скажем, «Боб», он также покажет результаты в разделе «Бобби».

Я использую метод w3schools. Ниже приведен код, который я использую

   <button class="button" onclick="filterSelection('all')">All</button>
  <button class="button" onclick="filterSelection('bob')">Bob</button>
  <button class="button" onclick="filterSelection('bobby')">Bobby</button>

  <div class="column bob">Bob</div>
  <div class="column bobby">Bobby</div>

и мой javscript

 filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  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(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("button");
for (var i = 0; i < btns.length; i  ) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("is-active");
    current[0].className = current[0].className.replace(" is-active", "");
    this.className  = " is-active";
  });
}

1. Когда вы ищете bob, он также соответствует bob in 'bob'by . Чтобы избежать этой проблемы, у вас должны быть уникальные имена классов или попробуйте следующее решение от Andu Andrici

Ответ №1:

изменить

 (x[i].className.indexOf(c) > -1)

Для

 ((" " x[i].className " ").indexOf(" " c " ") > -1)

Он добавляет пробел вокруг всей строки className, а также вокруг самого класса.

Это не позволит, чтобы поиск ‘bob’ возвращал положительный результат для ‘bobby’ 🙂

1. Это работает; однако попытка сортировки по всем больше не работает. Вы знаете, как я мог бы это исправить?

2. При сортировке всех просто перебирайте все элементы и отображайте их. Включите это в оператор if / else, например if (sort=»all») { код для отображения всех } else { запустите поисковый запрос и отобразите только соответствующие }