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";
});
}
解决方案
改变
(x[i].className.indexOf(c) > -1)
至
((" "+x[i].className+" ").indexOf(" "+c+" ") > -1)
它在整个 className 字符串以及类本身周围添加了一个空格。
这将不允许搜索“bob”为“bobby”返回正数:)
推荐阅读
- date - 在 XSD 中验证日期或日期时间的日期范围?
- scala - 如何映射所有元素都是类型类实例的 HList?
- azure - Azure 搜索架构迁移
- android - 支持 FreeFormWindow 的应用程序在角落启动
- excel - 如何从 pyspark 数据框中保存带有多张工作表的 excel 文件
- c++ - 如何将 std::array 元素附加或插入到 std::vector 中?
- python - Python - .insert() 方法只替换单词的第一个字母?
- sql - Google BigQuery SQL 是否有等待方法
- jenkins - Jenkins 声明性管道因 git checkout 步骤而失败
- arrays - 如何使用 VBA 宏将单个暗淡存储在数组中以循环遍历多个工作簿