Question

嗨我有一个奇怪的问题.css它给了我每个部分的'块'，即使有些是'无'

请注意，这是一项学校活动，绝不是一个功能性项目......

html文件。

<body>
<section id="log">
    <form>
        Login <input id="login" type="text"/><br>
        Password <input id="pass" type="password"/>
    </form>
    <br>
    <button id="authButton">Authentification</button> 
    <button id="inscrButton">Inscription</button><br>
    <br>
</section>

<section id="room">
    <form>
        Room <input id="roomName" type="text"/>
    <button id="creaRoomButton">Créer</button>
    </form>
    <div id="allRooms"></div>
</section>

<section id="chat">
    <textarea id="zone1" rows="10" cols="50"></textarea><br>
    <textarea id="zone2" rows="3" cols="50"></textarea>
    <button id="envoyButton">Envoyer</button><br>
    <button id="roomButton">retour</button>
    <button id="decoButton">Deconnexion</button>
</section>  

<script src="js/jquery.js"></script>
<script src="js/myScript.js"></script>
</body>

我的.js的这一部分应该显示'block'部分如果我们做f5并验证如果我们仍然连接，为此我尝试获取显示的部分：块以便我可以保持它'阻止'。

var section = "log";    
$('section').each(function(index){
    console.log($(this).attr('id') + ": " +  $(this).css('display'));
    if($(this).css('display') === 'block'){
        section = $(this).attr('id');
    }
});

console.log(section)

$.ajax({
    url:"/AuthServlet",
    type:'POST',
    data: {
        action: 'estConnecte',
        section: section
    },
    success: function(response){
        console.log(response)
        if(response==='log'){
            $("#log").css('display', "block");
            $("#room").css('display', "none");
            $("#chat").css('display', "none");
        }
        else if(response==='room'){
            $("#log").css('display', "none");
            $("#room").css('display', "block");
            $("#chat").css('display', "none");
        }   
        else{
            $("#log").css('display', "none");
            $("#room").css('display', "none");
            $("#chat").css('display', "block");
        }
    }
});

Answer 1

可能是导致问题的AJAX，因为你正在使用它来为某些元素设置none的显示状态 - 如果那不起作用，则不会设置任何元素t odisplay：none;

此问题可能是您需要修剪（）响应以删除返回消息的末尾的空格。请尝试以下方法：

   success: function(response){
      console.log(response)
      var resp = response.trim();
        if(resp==='log'){
            $("#log").css('display', "block");
            $("#room").css('display', "none");
            $("#chat").css('display', "none");
        }
        else if(resp==='room'){
            $("#log").css('display', "none");
            $("#room").css('display', "block");
            $("#chat").css('display', "none");
        }   
        else{
            $("#log").css('display', "none");
            $("#room").css('display', "none");
            $("#chat").css('display', "block");
        }

.css给了我关于我的部分的错误信息

1 个答案: