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

Reordering and hiding pictures depending on filter and search bar

本文关键字：排序 隐藏 新排序 过滤器 搜索栏      更新时间：2023-09-26

>我正在尝试创建一个'选择你的英雄'的东西。总共有 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 是正确的方法吗？任何有经验的人都可以给我一些建议或链接，因为我一定为此搜索了错误的术语。

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

编辑：添加了我自己的帖子，因为它会使这太长，让我知道你的想法

使用 classes 和 jQuery，您可以轻松地将所有div 与该类匹配。如果您为所有带有向导图片的div 指定一个类名"wizard"，那么您可以像这样选择所有这些div：

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

然后要隐藏其他内容，您可以这样做：

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

另外，如您所知，您可以使用多个类，因此您可以拥有这样的div：

<div class="heroPics wizard">

这将首先应用 heroPics 类样式，然后应用 wizardstyle 样式。 后者不必包含任何内容，您可以使用它对您的div 进行分类。

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 语法很棒，但没有动画，我最终将所有内容切换到绝对位置，添加过渡持续时间并每次都设置左侧和顶部。

相关文章：