1

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

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

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

4

2 回答 2

0

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

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

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

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

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

<div class="heroPics wizard">

这将首先应用 heroPics 类样式，然后是向导样式。后者不需要任何东西，你可以用它来分类你的div。

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

于 2013-06-08T16:34:07.753 回答