0

我正在处理的页面位于keeptheinternetpure.com/memory.html

代码位于keeptheinternetpure.com/myCode.js

样式表位于 keeptheinternetpure.com/standard.css

我正在尝试使用“选定”类获取元素的任何边框，以便在 2 个类之间快速切换，从而有效地使其动画化。我的代码目前适用于左侧表格的单元格，但是当您启动游戏并单击图标以手动将它们更改为选定的类时，它不起作用并且有一个奇怪的故障，这让我相信这是一个问题使用 clickedOn() 函数。改变类的函数是borderAnimation()。所选图块的边框应与左侧表格中的边框完全相同。

编辑：这是我的 clickedOn() 函数：

function clickedOn(index)
{
    tempIndex = index;
    ostream = document.getElementById('coordinates');
    ostream.innerHTML = 'Row ' + (Math.floor(tempIndex / $tblcols) + 1 + ' Column ' + (Math.floor(tempIndex % $tblcols) + 1));  

    //if the user already clicked
    if ($indexCounter >= 2)
        {
            //do nothing
        }
    else if ($theCards[index].status == "unselected")
    {
        $theCards[index].status = "selected";
        displayStatus(index);
        //if the user has guessed 1 time
        if ($selectedCounter < 2)
        {
            //change the status to selected and save the index
            $selectedCounter++;

        if ($selectedCounter != 2)
        {
            $previousIndex = index;
            $indexCounter++;
        }
    }
    //if the user has guessed 2 times
    if ($selectedCounter >= 2)
    {
        //if the types aren't the same
        if ($theCards[$previousIndex].type != $theCards[index].type)
            {
                //change the status back to unselected

                var a = setTimeout(function() {$theCards[index].status = "unselected"; $theCards[$previousIndex].status = "unselected"; displayStatus(index); displayStatus($previousIndex); $indexCounter = 0;}, 1000);
            }
            //if they are the same
            else
            {
                //change the status to solved
                setTimeout(function() {$theCards[$previousIndex].status = "solved"; $theCards[index].status = "solved"; displayStatus($previousIndex); displayStatus(index); $indexCounter = 0; $theScore+=10;}, 500);

                $solved+=2;

            }
            if ($solved == $theCards.length)
            {
                setTimeout(function() {resetGame()}, 1000);
            }

            $selectedCounter =0;

        }
}

}

4

1 回答 1

0

您需要向后循环，getElementsByClassName 是一个活动的HTMLCollection，因此它会更新。它不是一组静态的已找到项目。

运行这个演示：

HTML：

<div class="selected">Block</div>
<div class="selected">Block</div>
<div class="selected">Block</div>
<div class="selected">Block</div>

CSS：

div { border: 1px dashed #CCC; margin: 10px;}

.selected {
    border: 1px dotted #CCC;    
}

.invert {
   background-color: red;
}

JavaScript：

var elems = document.getElementsByClassName("selected");
for (var i=0;i<elems.length;i++) {
    elems[i].className="invert";
    console.log(elems.length);
}

http://jsfiddle.net/Ww9WD/

你会得到斑马条纹。

为什么？因为当您删除类时，节点集会更新以反映删除元素的更改以及将元素向下移动以填补空白之后的所有内容！

将 JavaScript 更改为 while 循环将修复它

var elems = document.getElementsByClassName("selected");
while (elems.length) {
    elems[0].className="invert";
}

或反向循环

var elems = document.getElementsByClassName("selected");
for (var i=elems.length-1i>=0;i--) {
    elems[i].className="invert";        
}
于 2013-06-17T20:12:17.377 回答