JSでdivクラスを変更する

Question

私は、ボタンが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

あなたは正しいコードをしただけでレディ機能により、あなたのコードをラップし、あなたのif文に{}を追加しよう：

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

注：$("#xs-check").is(":visible")が達成されることを確認してください。

これが役に立ちます。