includes函数返回异常false：复选框按Client ID过滤元素失效问题

我一眼就看出问题所在啦——这是个很容易踩的类型不匹配小坑！

问题根源 #

你控制台里看到的数值看起来一样，但它们的类型其实完全不同：

• 复选框的$checkbox.val()返回的是字符串类型的 "15"，所以activeFilters数组里存的全是字符串
• 而jQuery的$actualProject.data('client')会自动把data-client属性里的数值解析成数字类型的 15

JavaScript里字符串和数字是严格区分的，所以activeFilters.includes(15)自然找不到字符串的"15"，判断就一直返回false了。

两种解决方案 #

你可以任选一种来修复：

方案1：存入过滤器时转成数字

把复选框的值转为数字后再存入数组，这样和data('client')返回的数字类型完全一致：

$('input:checkbox').change(function() {
 $checkbox = $(this);
 const value = Number($checkbox.val()); // 转成数字类型
 if($checkbox.is(':checked')) {
 activeFilters.push(value);
 } else {
 var index = activeFilters.indexOf(value);
 if (index > -1) {
 activeFilters.splice(index, 1);
 }
 }
 updateProjects(activeFilters);
});

方案2：判断时把项目值转成字符串

保持过滤器数组的字符串类型，在判断时把项目的client值转为字符串：

$.each(projects, function(i, e) {
 let $actualProject = $(this);
 const clientId = String($actualProject.data('client')); // 转成字符串类型
 if( activeFilters.includes(clientId) ) {
 $actualProject.fadeIn("fast");
 } else {
 $actualProject.fadeOut("fast");
 }
});

补充说明 #

jQuery的.data()方法会智能解析属性值：如果是数字格式就转成Number，布尔值转成Boolean，甚至JSON字符串会转成对象。而表单元素的.val()方法总是返回字符串，这是很多开发者容易忽略的细节，下次遇到类似的匹配问题可以先检查类型哦！

内容的提问来源于stack exchange，提问作者Ken Ramirez