HTML列表筛选未正确筛选

Question

我正在我的网站上设置一个过滤系统，上面的按钮可以过滤下面的图片，我遇到了一个问题。当我尝试按"Bob“进行过滤时，它也会在"Bobby”下显示结果。

我使用的是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";
  });
}

Answer 1

变化

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

至

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

它在整个className字符串和类本身周围添加了一个空格。

这将不允许搜索'bob‘返回'bobby’的肯定结果:)