Javascript 过滤器元素：基于子类显示父元素

守则：

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
功能过滤器选择2（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv2”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

.filterDiv{
浮动：左；
文本对齐：居中；
保证金：2倍；
显示：无；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}

全部展示
汽车
颜色
水果

苹果
沃尔沃
红色

您不需要两种不同的

过滤器选择（）

方法：

最好这样做：

函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv”）；
如果（c=='all'）{
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}

.show{
显示：块！重要；
}
李{
显示：无；
}

全部展示
汽车
颜色
水果

苹果
沃尔沃
红色

如果您使用有助于在元素上添加/删除/切换/检查类的工具，您的代码将更具可读性，并且您可以使用来检查子目录中是否有与CSS选择器匹配的元素。代码不是我的。我正试图以W3学校的一个例子为基础学习。最初的例子是：