我已经在SO上阅读了一些帖子,但在我的情况下,我跟踪了所有这些内容,但仍然显示:无不会隐藏元素。这是代码
jQuery(function($) {
var socket = io.connect();
var $messageForm = $('#message-box');
var $messageBox = $('#message');
var $chat = $('#chat');
var $users = $('#users');
var $nickForm = $('#setNick');
var $nickError = $('#nickError');
var $nickBox = $('#nickname');
$('#message').keydown(function(event) {
if (event.keyCode == 13) {
$(this.form).submit()
return false;
}
});
$nickForm.submit(function(e) {
e.preventDefault();
socket.emit('new user', $nickBox.val(), function(data) {
if (data) {
$('#nickWrap').hide();
console.log("Showing Content Wrap");
$('#contentWrap').show();
} else {
$nickError.html("That nickname is already taken , try something else");
}
});
$nickBox.val('');
});
socket.on('usernames', function(data) {
var html = '<ul>';
for (i = 0; i < data.length; i++) {
html += '<li>' + data[i] + '</li>';
}
html = html + '</ul>';
$users.html(html);
});
$messageForm.submit(function(e) {
e.preventDefault();
socket.emit('send message', $messageBox.val(), function(data) {
$chat.append("<span class='error'>" + data + "</span><br/>");
});
$messageBox.val('');
});
socket.on('new message', function(data) {
$chat.append("<span class='msg'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>");
});
socket.on('whisper', function(data) {
$chat.append("<span class='whisper'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>");
});
socket.on('private', function(data) {
$chat.append("<span class='whisper'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>");
});
});
&#13;
html {
background-color: #a79580 !important;
}
body {
padding-top: 20px;
font-size: 16px;
background: transparent;
}
#contentWrap {
display: none !important;
}
.whisper {
color: grey;
font-style: italic;
}
.error {
color: red;
}
&#13;
<html>
<head>
<title>Socket IO</title>
<link href="/css/bootstrap.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="container">
<div class="row">
<div class="" align="center" id="nickWrap">
<img height="500" width="500" class="img-circle" src="/images/minion.jpg" />
<h3>Pick your super awesome nickname</h3>
<p id="nickError"></p>
<div class="form-group">
<form id="setNick" role="form">
<input type="text" autofocus required placeholder="Your nickname" id="nickname" />
<input class="btn btn-primary" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-offset-1 panel panel-primary">
<div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;">
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
</div>
</div>
</div>
</div>
<br/>
<div class="col-md-4 col-sm-offset-1 panel panel-default">
<div class="panel-heading">Chat</div>
<div class="panel-body">
<div align="left" id="users"></div>
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-3 col-md-offset-2">
<form id="message-box">
<div class="form-group">
<textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.4/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"></script>
<script>
</script>
</body>
</html>
&#13;
我试图隐藏id为contentWrap的div,但是显示:即使我已经使用过,但没有样式也无效!重要的是确保它覆盖任何其他冲突的样式。不确定我做错了什么
答案 0 :(得分:0)
您可能会触发某些内容
$('#message').keydown(function(event) {
if (event.keyCode == 13) {
$(this.form).submit()
return false;
}
当您加载页面然后应用$('#contentWrap').show();
答案 1 :(得分:0)
知道了,我不想在页面加载时显示下面的两个div。
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-offset-1 panel panel-primary">
<div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;">
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
</div>
</div>
</div>
</div>
<br/>
<div class="col-md-4 col-sm-offset-1 panel panel-default">
<div class="panel-heading">Chat</div>
<div class="panel-body">
<div align="left" id="users"></div>
</div>
</div>
</div>
</div>
和
<div class="row">
<div class="col-md-3 col-md-offset-2">
<form id="message-box">
<div class="form-group">
<textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea>
</div>
</form>
</div>
</div>
所以我把这两个div组合成另一个div
<div id="chatWindow">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-offset-1 panel panel-primary">
<div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;">
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
</div>
</div>
</div>
</div>
<br/>
<div class="col-md-4 col-sm-offset-1 panel panel-default">
<div class="panel-heading">Chat</div>
<div class="panel-body">
<div align="left" id="users"></div>
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-3 col-md-offset-2">
<form id="message-box">
<div class="form-group">
<textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea>
</div>
</form>
</div>
</div>
</div>
稍后检查了一些条件后,我用
更改了chatWindow的可见性$('#chatWindow').show();