使用jquery数组匹配类别名称并隐藏特定div

时间:2017-04-25 10:46:47

标签: jquery bigcommerce

我想隐藏并显示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>

1 个答案:

答案 0 :(得分:0)

首先,您需要遍历每个li,然后查找a标记的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