0

好的，这是我的问题。我正在创建一个包含一些图像的记忆游戏。我无法理解在使用 for-loop 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";

    }

}
4

4 回答 4

0

如果您将显示设置为无，那么您应该在其他地方将显示设置为某些东西 - 即块。

我推荐这个寻求帮助：http ://www.w3schools.com/cssref/pr_class_display.asp

于 2013-02-11T15:55:38.277 回答
0

在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在每次单击时在显示和隐藏之间切换显示

于 2013-02-11T17:48:24.910 回答
0

我已经解决了这个问题

 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";
    }

 }
于 2013-02-22T13:40:25.673 回答
0

谢谢大家的回复！我最终只是将提交按钮放在顶部..

<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;}
于 2013-05-01T18:41:55.200 回答