jquery 배열로 카테고리 이름을 일치시키고 특정 div를 숨기기

Question

div name에 따라 div id = "brandmenu"를 표시하려고합니다. 배열에 범주 이름이 포함되어 있으면이 div를 표시하고 그렇지 않으면 div를 숨 깁니다. .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
    var brandmenu = $("#brandmenu"); 
    var catName = "Activewear"; 
    var myarr = ["Activewear", "Anvil", "Bulwark", "CornerStone", "District", "District Made", "Fruit of the Loom", "Gildan", "Hanes", "Jerzees", "Port & Company", "Port Authority", "Precious Cargo", "Red House", "Red Kap", "Russell Outdoors", "Sport-Tek"]; 
    var arraycontainsturtles = (myarr.indexOf(catName) > -1); 
    if(arraycontainsturtles == true) { 
     brandmenu.show(); 
    } else { 
     brandmenu.hide(); 
    } 
    </script> 
    <div id="brandmenu" style="display:none;"> 
     content to hide and show 
    </div> 

Answer 1

먼저 당신은 a 태그의 각 li 다음 찾기를 HTML을 반복해야합니다. 귀하의 배열에서 그 단어를 찾으십시오. 다음 그것을 표시/숨기기.

var brandmenu = $("#brandmenu"); 
    var myarr = ["Anvil", "Bulwark", "CornerStone", "District", "District Made", "Fruit of the Loom", "Gildan", "Hanes", "Jerzees", "Port & Company", "Port Authority", "Precious Cargo", "Red House", "Red Kap", "Russell Outdoors", "Sport-Tek"]; 

    $('.navList > li').each(function(index,val){ 
     var catName = $(this).find('a').html(); 
     var arraycontainsturtles = (myarr.indexOf(catName) > -1); 
     if(arraycontainsturtles == true) { 
      $(this).show(); 
      } else { 
      $(this).hide(); 
     } 
    }); 

Fiddle