如何将HTML引导代码集成到JavaScript代码中？

Question

我写了一个html网站。有一个用bootstrap创建的按钮。我想根据布尔变量改变按钮和标签文本的设计。

下面是两种类型的按钮：

<div class="alert alert-success" role="alert"> 
    <center><strong>Open</strong></center> 
</div> 

<div class="alert alert-danger" role="alert"> 
    <center><strong>Close</strong></center> 
</div> 

我怎样才能在这个JavaScript代码集成这个网站的按钮？：

<script> 
    var open = true; 

    if (open = true) { 


    } else { 

    } 

</script> 

感谢您的帮助！

Answer 1

您可以使用预定义的引导类hidden（也有不赞成类hide）：

var open = false; 

if (open) { 
    $(".alert-success").addClass("hidden"); 
    $(".alert-danger").removeClass("hidden"); 
} else { 
    $(".alert-success").removeClass("hidden"); 
    $(".alert-danger").addClass("hidden"); 
}; 

，也可以定义只有一个按钮：

var open = true; 
 

 
    if (open) { 
 
    $(".alert").addClass("alert-success"); 
 
    $(".alert").removeClass("alert-danger"); 
 
    $(".alert").html("<center><strong>Open</strong></center>"); 
 
    } else { 
 
    $(".alert").removeClass("alert-success"); 
 
    $(".alert").addClass("alert-danger"); 
 
    $(".alert").html("<center><strong>Close</strong></center>"); 
 
    }; 
 

<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> 
 
<div class="alert" role="alert"></div>

Answer 2

这里是一个很好的例子，你可以使用纯Java按钮点击使div消失脚本

var button = document.getElementById('button'); 

    button.onclick = function() { 
    var div = document.getElementByClass('alert alert-success'); 
    if (div.style.display !== 'none') { 
     div.style.display = 'none'; 
    } 
    else { 
    div.style.display = 'none'; 
    } 

http://jsfiddle.net/andrewwhitaker/hefGK/

所以，当你想通过改变将style.display到style.color并匹配代码藏汉你可以简单地更改设计。