无法让 jquery show() 显示元素

Question

我已经准备好通过 window 测试我的电脑了，不知何故我似乎找不到我的错误。我觉得我要疯了。我有一个简单的登录页面，您可以在其中输入姓名和房间代码，然后按提交。按下提交后，我想隐藏表单并显示一个表示您已连接到服务器的元素。我正在使用以下 ejs/HTML 页面：

<!DOCTYPE html>
    <html>
      <head>
        <title>Login</title>
        <script
          src="https://code.jquery.com/jquery-3.5.0.min.js"
          integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
          crossorigin="anonymous"></script>
        <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
        <script src="/assets/zoomFriendsAjax.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
      </head>
      <body>
        <script src="/assets/sockets.js"></script>
        <h2>Welcome To ZoomFriends</h2>

        <div id="pagecontent">
          <div id="serverform">
            <form>
              <label for="servercode"><strong>Server Code:</strong></label>
              <input type="text" id="servercode" name="servercode" placeholder="Insert your server code here..." required>
              <label for="nickname"><strong>Your Nickname</strong></label>
              <input type="text" id="nickname" name="nickname" placeholder="Insert your nickname here..." required>
              <button type=submit>join room</button>
            </form>
          <div>
          <div id="connpage">
            <h2>Connected to server</h2>
          </div>
        </div>
      </body>
    </html>

然后是这个 ajax js 文件，它在提交时激活并包含一个显示已连接的函数，它应该显示 "connpage" 并隐藏 "form" 它只做后者：

$(document).ready(function(){


  $('#serverform').on('submit', function(){

      var player = $('input[type="text"]#nickname');
      var room = $('input[type="text"]#servercode');
      var joindata = {player: player.val(), room: room.val()};

      $.ajax({
        type: 'POST',
        url: '/button',
        data: joindata,
        success: function(data){

          serverconnected();

        }
      });




      return false;

  });

  function serverconnected(){
    $('#connpage').show();
    $('#serverform').hide();
  }

});

然后就是这个css里面connpage设置显示：none;

body{
    background: #0d1521;
    font-family: tahoma;
    color: #989898;
    text-align: center;
}

#todo-table{
    position: relative;
    width: 95%;
    background: #090d13;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

#todo-table form:after{
    margin: 0;
    content: '';
    display: block;
    clear: both;
}

#connpage{
    display: none;
}

input::placeholder {
  font-style: italic;
}

input[type="text"]{
    width: 100%;
    padding: 20px;
    background:#181c22;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

label{
    width: 100%;
    padding: 20px;
    background:#23282e;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

button{
    padding: 20px;
    width: 100%;
    float: left;
    background: #23282e;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 80px;
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: arial;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}

li:hover{
    text-decoration: line-through;
    background: rgba(0,0,0,0.2);
}

h1{
    background: url(/assets/logo.png) no-repeat center;
    margin-bottom: 0;
    text-indent: -10000px;
    text-align: center;
}

这是处理提交按钮点击的服务器脚本部分：

//if submit button is pressed
    app.post('/button', urlencodedParser, function(req, res){
      //console.log("pushed the button")
      var message = req.body.player;
      var found = rooms.some(el => el.roomcode === req.body.room);
      if (found){
        var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
        io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
        //var currentroom = rooms.find(element => element.roomcode === req.body.room);
        rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
        //currentroom.players.push({nickname: req.body.player, id: socket.id});
        console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
        //console.log(currentroom);
        console.log(rooms[targetindex]);
        res.json(rooms[targetindex]);
      }
    });

据我所知，一切正常，除了 connpage 从未显示，我完成了每个功能，所有数据都按照我想要的方式记录，除了 $('#connpage').show(); 什么都不做，它没有'甚至没有礼貌地向我发送错误或其他信息；p。任何人都可以帮忙，我要疯了......最终我需要大量的显示和隐藏才能继续，通过页面的所有状态，而不刷新页面。真的很欢迎任何帮助，谢谢你看一看。

Answer 1

您的 HTML 中存在语法错误。你永远不会关闭你的 serverform TAG.That 你的连接页面在那个容器里面并且也被隐藏了 Change

<div id="serverform">
    ....
<div>

至

<div id="serverform">
...
</div>

Answer 2

通常$("#connpage").show()；应该工作，也许在你的应用程序的某些部分你正在覆盖它，你可以使用 $('#connpage').css('display', '') 作为替代。如果 none 有效，您可以删除显示 none，并在开始时使用 .hide() 隐藏它。希望对您有所帮助

无法让 jquery show() 显示元素

Can't get jquery show() to show the element

javascript

ajax

jquery

show