javascript - 根据过滤器和搜索栏重新排序和隐藏图片

Question

我正在尝试创建一个“选择你的英雄”的东西。共有113个英雄，每个英雄都有各自的标签，例如:巫师、战士等。

到目前为止我所做的方法是创建一个容器并向该容器添加总共 114 个 div。我有这个:

.heroPics {
    background-image: url(newHeroes.jpg);
    background-size: 792px 792px;
    width: 72px;
    height: 72px;
    float: left;
    margin-left: 5px;
    margin-top: 20px;
    text-align: center;
    line-height: 11;
    font-size: 15px;
    position: relative;
}

for (var i = 1; i < 114; i++) { 
    srsHeroes[i] = document.createElement("div");
    srsHeroes[i].textContent = theNames[i];
    srsHeroes[i].className = "championPics " + theNames[i] + "-sprite";
    srsHeroes[i].draggable = false;
    srsHeroes[i].name = theNames[i];
    srsHeroes[i].num = i;
    heroSelection.appendChild(srsHeroes[i]);
}

例如，我正在考虑创建一个数组

wizard = [ 14, 17, 28, 34, 69, 90, 101 ];

一旦他们单击一个复选框以仅显示巫师英雄，它就会执行一个 for 循环来隐藏所有 113 个 div，然后执行以下操作:

  for (var i = 50; i < 70; i++) {   
    heroSelection.insertBefore(srsHeroes[wizard[i]], srsHeroes[115]);
//and also do style.visiblity = "visible";
    }

但这似乎是一个糟糕的方法，或者真的很困惑/丑陋。我不太喜欢使用库，包括jquery。使用 div 是正确的方法吗？有经验的人可以给我一些建议或链接，因为我一定为此搜索了错误的术语。

有人可以给我一些关于如何创建一个搜索栏的介绍，他们可以在其中写英雄名字并且它可以做同样的事情吗？重新排序并正确隐藏所有内容。进行过渡也可能很酷，但没有必要，哈哈。预先感谢您的阅读和所有帮助。

编辑:添加了我自己的帖子，因为它会使这篇文章太长，请告诉我您的想法

Answer 1

使用类和 jQuery，您可以轻松地将所有 div 与该类匹配。如果您为所有带有向导图片的 div 指定类名称“wizard”，那么您可以像这样选择所有它们:

$("div[class='wizard']").show();

然后要隐藏其他人，您可以这样做:

$("div[class!='wizard']").hide();

此外，正如您所知，您可以使用多个类，因此您可以有一个像这样的 div:

<div class="heroPics wizard">

这将首先应用 HeroPics 类样式，然后应用向导样式。后者不必包含任何内容，您只需使用它来对您的 div 进行分类即可。