Question

好的，这是我的问题。我正在创建一个内存游戏，其中包含一些图像。我无法理解在使用for循环onLoad函数将其设置为display ='none'之后我将如何显示图像。

我已经尝试了几个小时而没有结果。 =（

任何可以帮助我的人？

并且elem.id也指向了一个td id，所以它是动态的。这很棘手，因为在每个td都有一个img。

我真诚地感谢你的帮助。

这是我的代码：

    var clicked = true;
    var firstClick;
    var secondClick;
    var firstPlayer = true;
    var addPointPlayer1 = 0;
    var addPointPlayer2 = 0;
    var totalPoints = 8;


    function clickCard(elem){       

    //document.getElementsByTagName('img').style.display = "";

    if(clicked){
        firstClick = document.getElementById(elem.id);
    //  document.getElementsByName(/.img/).style.visibility="visible";
        firstClick.style.backgroundColor= "white";
        clicked = false;

        }

    else{

        secondClick = document.getElementById(elem.id);
        secondClick.style.backgroundColor = "white";


            if(firstClick.innerHTML == secondClick.innerHTML){
                firstClick.style.backgroundColor="white";
                secondClick.style.backgroundColor="white";
                if(firstPlayer){
                    addPointPlayer1++;
                    totalPoints--;
                    }
                else{
                    addPointPlayer2++;
                    totalPoints--;
                    }

                }


            else {
                alert('This is not a pair, player change');
                firstClick.style.backgroundColor="#7f1a1a"; 
                secondClick.style.backgroundColor="#7f1a1a";
                if(firstPlayer){
                    firstPlayer = false;
                    }
                    else{
                        firstPlayer = true;
                    }           
                }

            clicked = true;

            }

            //Keeping control of the winner
            if(totalPoints == 0){
                if(addPointPlayer1 > addPointPlayer2){
                    alert("Game over! Player 1 wins with " +    addPointPlayer1 + " points" + addPointPlayer2);
                    }
                    else if (addPointPlayer1 == addPointPlayer2){
                        alert("This is a draw press cmd+R for a rematch");
                        }

                else{
                    alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
                    }
            }

    }

    //creates a blank game-plan
    function hideGamePlan(){
    var images = document.getElementsByTagName('img');
    for (i = 0; i < images.length;i++ ) {
        images[i].style.display = "none";

    }

}

Answer 1

如果您将显示设置为无，那么您应该将显示设置为某个位置 - 即阻止。

我建议您寻求帮助：http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

if(clicked){firstClick = document.getElementById(elem.id);之后我猜您的问题是找到子图像标记元素

如果是这种情况您可以使用find（“img”）

我的意思是

if(clicked){
        firstClick = document.getElementById(elem.id);
        elemtochange = firstClick.find("img");
        // Changing image style here
        elemtochange.style.display ="block";
}

或者您可能希望通过

查看Jquery为您做同样的事情

if (clicked){
     $(elem).children("img").show(); // elem = Clicked element
}

而不是show您可以使用hide隐藏元素，或toggle在每次点击时切换显示和隐藏之间的显示

Answer 3

我用

解决了这个问题

 function clickCard(elem){      



    if(!clicked){
        firstClick = document.getElementById(elem.id);
        firstClick.style.backgroundColor= "white";
        findImage[firstClick.id-1].style.visibility="visible";
        clicked = true;
        //alert(findImage);

        }

    else{
        secondClick = document.getElementById(elem.id);
        secondClick.style.backgroundColor = "white";
        findImage[secondClick.id-1].style.visibility="visible"; 
    //  firstClick.getAttribute('src');
    //  secondClick.getAttribute('src');

            if(firstClick.innerHTML == secondClick.innerHTML){

                firstClick.style.backgroundColor="white";
                secondClick.style.backgroundColor="white";

                if(firstPlayer){
                    addPointPlayer1++;
                    totalPoints--;
                    }
                else{
                    addPointPlayer2++;
                    totalPoints--;
                    }

                }


            else {

                alert('This is not a pair, player change');

                firstClick.style.backgroundColor="#7f1a1a";
                secondClick.style.backgroundColor="#7f1a1a";
                findImage[firstClick.id-1].style.visibility="hidden";
                findImage[secondClick.id-1].style.visibility="hidden";


                if(firstPlayer){
                    firstPlayer = false;                        
                    //findImage[elem.id-1].style.visibility="hidden";
                    }
                    else{
                        firstPlayer = true;
                    }           
                }


            clicked = false;
            }

            //Keeping control of the winner
            if(totalPoints == 0){
                if(addPointPlayer1 > addPointPlayer2){
                    alert("Game over! Player 1 wins with " + addPointPlayer1 + " points" + addPointPlayer2);
                    }
                    else if (addPointPlayer1 == addPointPlayer2){
                        alert("This is a draw press cmd+R for a rematch");
                        }

                else{
                    alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
                    }
            }


 }

 function hideGamePlan(){
findImage = document.getElementsByTagName('img');
for (i = 0; i < findImage.length;i++ ) {
    findImage[i].style.visibility = "hidden";
    }

 }

Answer 4

感谢所有回复！我最后只是将提交按钮放在顶部..

<form action = "/memory-game/index.php" method = "POST">
<input type="submit" name="dog" value="Dog" />
<input type="submit" name="cat" value="Cat" />
<input type="submit" name="fish" value="Fish" />
<input type="submit" name="zoo" value="Zoo" />
<input type="submit" name="xmas" value="Xmas" />
<input type="submit" name="pen" value="Pengins" />
</form>

然后其他页面就这样做了：

if(isset($_POST['dog'])){$currentArr = $dogArr;}
elseif(isset($_POST['cat'])){$currentArr = $catArr;}
elseif(isset($_POST['fish'])){$currentArr = $fishArr;}
elseif(isset($_POST['xmas'])){$currentArr = $xmasArr;}
elseif(isset($_POST['pen'])){$currentArr = $penginArr;}
elseif(isset($_POST['zoo'])){$currentArr = $zooArr;}

试图在记忆游戏中显示图像

4 个答案: