我准备把我的电脑从窗户扔出去，不知为何我似乎找不到我的错误。我觉得我快疯了。我有一个简单的登录页面，你输入一个名字和一个房间代码，然后你按提交。在你按下提交键后，我想隐藏表单，并显示一个元素，说明你已经连接到服务器。我使用的是下面的ejsHTML页面。
<!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 "并隐藏 "表单"，但它只做了后者。
$(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。谁能帮帮我，我快疯了...... 最后，我需要大量的显示和隐藏，以通过页面的所有状态，而不刷新页面。真的很欢迎任何帮助，谢谢你哪怕看一眼。
你的HTML中出现了语法错误。你从未关闭你的 serverform TAG.这样你的connpage就在那个容器里面，也会被隐藏起来。
<div id="serverform">
....
<div>
到
<div id="serverform">
...
</div>
通常 $("#connpage").show();应该可以，也许在你的应用程序的某些部分你正在覆盖它，你可以使用 $('#connpage').css('display', '') 如果它们都不奏效，你可以删除显示none，并在开始时你可以用 .hide() .我希望它帮助