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

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赋予类名“向导”，则可以像这样选择所有它们：

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

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

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

此外，正如您所知，您可以使用多个类，因此您可以具有如下所示的div：

<div class="heroPics wizard">

这将首先应用heroPics类样式，然后应用向导样式。后者不需要任何内容​​，您可以使用它来对div进行分类。

Answer 2

for (var i = 1; i < 114; i++) {
srsHeroes[i].style.visibility = "hidden";
}

var test = heroSelection.getElementsByClassName( 'fighter' );
var gg = 1;
var bg = 0;
for (var i = 0, j = test.length; i < j; i++ ) {
    test[i].style.visibility = "visible";
    test[i].style.transitionDuration= "1.5s";
    test[i].style.transitionTimingFunction="ease"
    test[i].style.left = -73 + (77 * gg) + "px";
    test[i].style.top = -10 + (90 * bg) + "px";
    gg ++;
        if(gg > 10) {
            gg = 1;
            bg ++;
        } 
}

这实际上最终效果很好。尽管我每次都必须重置transitionDuration，因为即使隐藏div，如果这样放置，也会造成1.5秒的延迟。 insertNode实际上也很好，但是我找不到动画的方法，如果您对此感兴趣，可以使用以下代码：

var test = heroSelection.getElementsByClassName( 'wizard' );
    for (var i = 0, j = test.length; i < j; i++) {
        test[i].style.visibility = "visible";   
    heroSelection.insertBefore(test[i], heroSelection.firstChild);

firstChild语法很棒，但是没有动画我最终将所有内容切换到绝对位置，添加了过渡时间，并且每次都只设置了left和top。