我准备把我的电脑扔到窗外，不知怎么的，我似乎找不到我的错误。我觉得自己快要疯了。我有一个简单的登录页面，您可以在其中输入姓名和房间代码，然后按提交。在你按下提交后，我想隐藏表单并显示一个元素，表明你已连接到服务器。我正在使用以下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文件，它在提交时激活，并包含一个显示connected的函数，该函数应该显示"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 NEVER SHOWS，我完成了每一个函数，所有数据都按照我想要的方式记录，除了$('#connpage').show();什么都不做，它甚至没有向我发送错误或其他什么；p.有人能帮忙吗，我快疯了。。。。最终，我需要大量的显示和隐藏来继续，浏览页面的所有状态，而不刷新页面。任何帮助都是非常受欢迎的，谢谢你看一眼。
HTML中存在语法错误。你永远不会关闭你的serverform标签。这样你的连接就在那个容器里，也会被隐藏起来。更改
<div id="serverform">
....
<div>
至
<div id="serverform">
...
</div>
通常为$("#connpage").show()；如果工作正常，也许在应用程序的某个部分，您正在覆盖它，您可以使用$('#connpage').css('display', '')作为替代方案。如果它们都不起作用，则可以删除display none，并在开始时使用.hide()隐藏它。我希望它能帮助