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代码中集成此html按钮？：

    <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

这是一个很好的例子，说明如何使用纯javascript

按钮单击使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并匹配代码。

如何将html引导代码集成到javascript代码中？

2 个答案: