Question

我已经在SO上阅读了一些帖子，但在我的情况下，我跟踪了所有这些内容，但仍然显示：无不会隐藏元素。这是代码

＆＃13;

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，但是显示：即使我已经使用过，但没有样式也无效！重要的是确保它覆盖任何其他冲突的样式。不确定我做错了什么

Answer 1

您可能会触发某些内容

$('#message').keydown(function(event) {
    if (event.keyCode == 13) {
        $(this.form).submit()
        return false;
     }

当您加载页面然后应用$('#contentWrap').show();

Answer 2

知道了，我不想在页面加载时显示下面的两个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();

display：none style not working

2 个答案: