Fatal编程技术网
  • javascript/
  • Javascript Can'；t获取jquery show（）以显示元素

Javascript Can'；t获取jquery show（）以显示元素

javascript jquery ajax

Javascript Can'；t获取jquery show（）以显示元素,javascript,jquery,ajax,show,Javascript,Jquery,Ajax,Show,我准备把我的电脑扔出窗外，不知怎么的，我似乎找不到我的错误。我觉得我快要疯了。我有一个简单的登录页面，您可以在其中输入姓名和房间代码，然后按submit。按下submit后，我想隐藏表单并显示一个表示您已连接到服务器的元素。我正在使用以下ejs/HTML页面： <!DOCTYPE html> <html> <head> <title>Login</title> <script

我准备把我的电脑扔出窗外，不知怎么的，我似乎找不到我的错误。我觉得我快要疯了。我有一个简单的登录页面，您可以在其中输入姓名和房间代码，然后按submit。按下submit后，我想隐藏表单并显示一个表示您已连接到服务器的元素。我正在使用以下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>
还有一个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谁能帮帮我，我快发疯了。。。。最终，我需要大量的显示和隐藏来继续，浏览页面的所有状态，而不刷新页面。非常欢迎提供任何帮助，感谢您的关注。
您的HTML中有语法错误。您永远不会关闭
serverform
标记。这样，您的页面就在该容器中，并且也会被隐藏起来


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




....


到



...

通常
$（“#connpage”）.show（）
；如果可以的话，也许在你的应用程序的某些部分你正在覆盖它，你可以使用
$（'connpage'）.css（'display'，''）
作为替代。
如果它们都不起作用，则可以删除显示none，并在开始时使用
.hide（）
将其隐藏。

我希望它有帮助
您是否已经尝试将console.log消息设置到函数serverconnected（），以检查是否调用了此函数？@matthias_h我刚刚添加了一个警报，函数运行了，我还怀疑它运行了，因为它确实隐藏了表单。最好的办法是使用“浏览器元素”选项卡查找您的（右键单击表单上的控件并选择“检查”），然后找到页面并检查样式。您可能会发现父元素隐藏或不在页面上（偏移量=-1000）或者类似于你不希望看到的东西。你不能显示它，因为它在你隐藏的serverform！内部。为什么？语法错误。一个好的编辑器会向你显示未关闭的
@freedomn-m length=1上的错误。我甚至没有注意到ahahahahah仍然不起作用。它起作用了！我确实错过了一个“/”这花了我3个小时的生命…你们真是太棒了…不。如果没有语法错误，它还是不会工作的。上面的一点是，如果
.show（）
不工作，那么
.css（'display'，''）
和css/.hide（）。如果这些都不起作用，那就意味着jquery代码中有一些重写或者存在一些问题，这是因为div彼此在一起，因为我没有用标记关闭serverform，而是添加了另一个标记。

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



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