Изменение класса div с помощью JS

Question

Im пытается свернуть панель с помощью кнопки id="collapsible", которая работает, а затем мне нужно изменить класс панели ниже id="gamewindow", чтобы заполнить весь экран, поэтому при загрузке мне нужно изменить col-md -9 до col-md-12, и это часть, которая не работает.

Мой HTML:

<div class="collapse in" id="collapsible"> 
.... 
</div> 
<div id="gamewindow" class="col-md-9"> 
.... 
</div> 

Мои JS:

if($("#xs-check").is(":visible")) 
    $("#collapsible").removeClass("in"); 
    $("#gamewindow").removeClass("col-md-9"); 
    $("#gamewindow").addClass("col-md-12"); 

моя кнопка

<button class="btn btn-link" data-toggle="collapse" data-target="#collapsible">Toggle Stats</button> 

Что я делаю неправильно?

Answer 1

Поместите этот код JavaScript внутри функции документа jQuery, как показано ниже.

Затем вместо удаления и добавления классов. используйте toggleClass. Я использую col-xs, поскольку выходной экран здесь меньше.

$(document).ready(function() { 
    //Put your code here that you want to execute on load  

    if($("#xs-check").is(":visible")) { 
     $("#collapsible").removeClass("in"); 
     //Remove: $("#gamewindow").removeClass("col-md-9"); 
     //Remove: $("#gamewindow").addClass("col-md-12"); 
     $("#gamewindow").toggleClass("col-xs-12 col-xs-9"); 
    } 

}); 

Ниже приведен рабочий пример, как переключаться между 9 и 12 классами. Я не уверен, как именно вы хотите, но вы можете получить представление из этого рабочего примера.

//Change ID as per your requirements 
 

 
$("#btn_ID").click(function() { 
 
    $("#gamewindow").toggleClass("col-xs-12 col-xs-9"); 
 
});

#gamewindow, #collapsible { 
 
    border: 1px solid black 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button id="btn_ID" class="btn btn-link" data-toggle="collapse" data-target="#collapsible">Toggle Stats</button> 
 

 
<br /> 
 

 
<div class="collapse in" id="collapsible"> 
 
    Collapsible 
 
</div> 
 

 
<div id="gamewindow" class="col-xs-12"> 
 
    <p> 
 
     Content 
 
    </p> 
 
</div>

Answer 2

Вы имеете правильный код просто попытаться обернуть ваш код на готовую функцию и добавить {} к вашему, если заявление:

$(function(){ 
    if($("#xs-check").is(":visible")) 
    { 
     $("#collapsible").removeClass("in"); 
     $("#gamewindow").removeClass("col-md-9"); 
     $("#gamewindow").addClass("col-md-12"); 
    } 
}) 

ПРИМЕЧАНИЕ: Убедитесь, что $("#xs-check").is(":visible") будет достигнута.

Надеюсь, это поможет.