html code
The following html tag is just one of them, there are 25 such tags
<div class="totalList">
<ul class="yyyz_ul">
</ul>
</div>
<div class="list">
<div class="listtt">
<div class="iconbox"> <img style="height:40px;" src="./img/icon22.png" alt=""></div>
<div style="margin-left:20px;">
<div class="list_titlel">Cow</div>
<div class="list_incld">Contains the following <span class="list_num">3</span> categories</div>
<div class="scbox">
<div class="list_list"><span class="yuan"></span>Niu Yimai</div>
<div class="list_list"><span class="yuan"></span>Niuerbuy</div>
<div class="list_list"><span class="yuan"></span>Check</div>
</div>
</div>
</div>
<div class="bl_btn_box">
<div class="yc_btn" data-title="yjd" ><img class="bs" style="height:16px;margin-right:3px;" src="./ img/bs.png" alt=""><img class="bs1" style="height:16px;margin-right:3px;" src="./img/bs1.png " alt="">Buy</div>
<div class="nobl_btn_two" data-url="https://prod-pass4.ehbapp.hubei.gov.cn/static/home4.0/images/yjd.mp4"><img class=\ "video" style="height:16px;margin-right:3px;" src="./img/video.png" alt=""><img class="video1" style ="height:16px;margin-right:3px;" src="./img/video1.png" alt="">Example</div>
</div>
<div class="bl_btn_box_1">
<div class="bl_btn ztlb_search"><div class="yslbName" data-themeName='Optical Shop' data-type='Optical Shop' data-themeId="6419f3b60085468f8e39c9c4a554134c" data -title="Optical Shop">Now</div></div>
</div>
</div>
css code
.totalList{
/* padding-top: 0.36rem; */
margin-left: 20px;
}
.yyyz_ul{
max-height: 0.96rem;
overflow: hidden;
}
.yyyz_ul .list_item{
float: left;
width: 1.52rem;
height: 0.4rem;
line-height: 0.4rem;
text-align: center;
cursor: pointer;
background: rgba(242, 246, 252, 1);
margin: 0 0.24rem 0.08rem 0;
font-size: 0.16rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 0.1rem;
}
.list_item.active{
background: rgba(255, 91, 36, 1);
color: #fff;
}
.list {
width: 376px;
height: 330px;
background: #FFFFFF;
box-shadow: 0px 0px 16px 0px rgba(144, 147, 153, 0.32);
padding: 32px 24px 24px 32px;
position: relative;
/* flex-wrap: wrap; */
margin-right:12px;
margin-left:12px;
margin-bottom: 24px;
}
.listtt {
display: flex;
height:170px;
}
.iconbox {
width: 40px;
height: 40px;
}
.list_titlel {
font-size: 22px;
font-family: MicrosoftYaHeiSemibold;
color: #000000;
/* line-height: 30px; */
font-weight: 600;
margin-bottom: 10px;
}
.list_incld {
font-size: 16px;
font-family: MicrosoftYaHei;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 12px;
/* line-height: 24px; */
}
.list_num {
color: #4269DB;
}
.list_list {
font-size: 16px;
font-family: MicrosoftYaHei;
color: rgba(0, 0, 0, 0.65);
line-height: 24px;
display: flex;
align-items: center;
/* margin-left:-12px; */
margin-bottom: 8px;
position: relative;
}
js code
var nameList=['Holstein cattle', 'Aleshire cattle', 'Gengsai cattle', 'Arabian horses', 'Sweat-blooded horses', 'Mongolian horses',\ 'Sheep','Hu Sheep','Goat','Blue Sheep']
var niuList=['Holstein cattle', 'Aleshire cattle', 'Gangsai cattle']
var maList =['Arab horse','blood horse','Mongolian horse']
var yangList =['Sheep','Hu Sheep','Goat','Blue Sheep']
var List =[{
type:'qb',
name:'all'
},{
type:'niu',
name:'Cow'
},
{
type:'yang',
name:''Sheep
},
{
type:'ma',
name:'horse
},
$(function()
{
?getTotalList()
//render page
function getTotalList(){
var html=''
for(i=0;i<List.length;i + + ){
var element = List[i]
html + ='<li class="list_item" type="' + element.type + '"
onclick="fuWuChange(this)" >' + element.name + '</li>'
}
$('.yyyz_ul').html(html)
}
//Click style change event
$('li').on('click',function(){
$(this).addClass('active').siblings().removeClass('active')
var searchText = $(this).html()
$('.ipt').val(searchText)
})
}
//Get all tags on the page
var ListAll = document.getElementsByClassName('list')
function fuwu(data){
//First display all tags on the page, otherwise there will be an error that content that matches the type is not displayed.
for(var i=0;i<ListAll.length;i + + ){
ListAll[i].style.display = 'block'
}
//Filter out tags that do not belong to the current category and hide them
var new_Arr = nameList.filter((i)=>data.every(j=>i!=j))
for( var i=0;i<new_Arr.length;i + + ){
var k = nameList.indexOf(new_Arr[i])
ListAll.item(k).style.display ='none'
}
//Method Two
//Hide all tags on the page first, otherwise there will be an error that content that matches the type will not be displayed.
for(var i=0;i<ListAll.length;i + + ){
ListAll[i].style.display = 'none'
}
//Filter out the tags belonging to the current category and display them
for( var i=0;i<data.length;i + + ){
var k = nameList.indexOf(data[i])
console.log(k);
//I don’t know why the first k will be -1. If this situation is not filtered out, an error will be reported.
if(k!==-1){
ListAll.item(k).style.display ='block'
}
}
}
function fuWuChange(obj){
var list_type = obj.type
if(list_type=='qb'){
for(var i=0;i<ListAll.length;i + + ){
//More than 8, hide redundant labels
if(i>8){
ListAll[i].style.display = 'none'
}else{
ListAll[i].style.display = 'block'
}
}
} else if(list_type=='niu'){
fuwu(niuList)
}else if(list_type=='yang'){
fuwu(yangList)
}
else if(list_type=='ma'){
fuwu(maList)
}
My thoughts
Method 1
I want to get the label ListAll on the page, and then loop through the niuList. If ListAll contains the type, display it.
var ListAll = document.getElementsByClassName('list')
let Arr = Array.prototype.slice.call(ListAll)
for(i=0;i<niuList.length:i + + ){
if(Arr.includes(niuList[i]){
ListAll[i].style.dispaly='block'
}else{
ListAll[i].style.dispaly='none'
}
Obviously this method will not work. ListAll is not an array, so it is converted to an array, but the includes method still does not work.
It may be because of this situation that it cannot be searched at all, so this method cannot be used 
Method 2
I want to use the indexof method to get the index value of the current element in ListAll from niuList, and then hide it. The same method as idea 1 does not work.