javascript - JQuery:如何让元素在用户点击后显示？

Question

我是 JQuery 新手。我要做的作业是一个纸牌游戏，两名玩家玩游戏以击败对方的总和。无论如何，一旦用户输入他们的名字并单击“新游戏”，我就无法在显示游戏区域的第一步中遇到麻烦。当页面加载时，我能够成功隐藏游戏，但是当我输入名称并单击新游戏时，没有任何反应。我阻止了默认设置，并且方法中也有 .show 。有谁知道如何做到这一点？这是我到目前为止的代码:

$(document).ready(function(){
$(".GameArea").hide();
  GameStart(); 
 });

 function GameStart(){
 $(".PlayerID").on("button",function(event) { 
    event.preventDefault();

    setupUsers();
    turnSetUp();
     });
      }

    function setupUsers(){
    Player1Name = document.PlayerName;
    Player2Name = document.PlayerName2;

     var player1Score = 0;
     var player2Score = 0;

     var x = [[Player1Name,Player1Score], [Player2Name, Player2Score]];

     $(".GameArea").show(); 

     }

    function turnSetUp(){
    $.post("link.php") //this is a full php address that was provided to me, ignore the link
    .done(function (data){ 
       var deck = $.parseJSON(data);
       resetListeners();
          //deck.Cards[0] is the value to beat 
          //loop to get the remainder cards from the deck  
         });
          }         

        function resetListeners(){
        $(".GameArea a").on("click", function(fixCard){
        //event.preventDefault();
        //console.log( $( this ).text() );
        });
         }


       function fixCard(){

           }


      function calculateCurrentScore(){

      }


      function EndGame(){

        }

这也是 html 的游戏区

           <div class="GameArea">

            <span id="firstgroup">
                <a href="">
                    <img src="Desktop Cards/desktopCard0.png" alt="0"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard1.png" alt="1"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard2.png" alt="2"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard3.png" alt="3"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard4.png" alt="4"/>
                </a>
            </span>

            <span id="secondgroup"> 
                <a href="">
                    <img src="Desktop Cards/desktopCard0.png" alt="0"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard1.png" alt="1"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard2.png" alt="2"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard3.png" alt="3"/>
                </a>
                <a href="">
                    <img src="Desktop Cards/desktopCard4.png" alt="4"/>
                </a>

            </span>
        </div>

Answer 1

我认为您的代码中可能存在错误。

 function GameStart(){
   $(".PlayerID").on("button",function(event) { 
   event.preventDefault();

   setupUsers();
   turnSetUp();
   });
  }

当使用 jquery on 函数时，您所说的“按钮”实际上没有任何意义，我们需要做的是选择 $([button id]) 中的按钮并创建一个单击事件。有点像这样。

$("[id for area to show]").on("click",function(event) {
  //code to display game area goes here.
}

将来我会隔离这个问题，甚至检查 google chrome 上的开发者控制台。可以在此处轻松跟踪错误消息，并可以让您知道出了什么问题。