我怎么能告诉这个HTML代码中的javascript不影响所有按钮？

Question

我创建了一个带有bootstrap和jquery的html网站。 我想，按钮会根据布尔变量更改标签文本和设计。 这适用于javascript。 但是我在整个页面上都有这个按钮（绿色和蓝色）。 现在要么所有按钮都显示为绿色，要么所有按

以下是两个按钮的含义示例：

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

                                    <script>
                                        var open = true;

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

                                    </script>


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

                                    <script>
                                        var open = false;

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

                                    </script>

我怎么能停下来，这两个按钮总是具有相同的功能？

谢谢，你帮了我很多忙！

Answer 1

您的问题似乎是您的代码从未指向特定警报。

var open = false和var open = true只是设置一个全局变量open从任何警报独立。 当你调用$(".alert").doSomething它通过DOM并应用于具有类警报的所有元素。

一种解决方案可能是添加类open和notOpen或东西，并用这些代替alert

Answer 2

你犯了合乎逻辑的错误，却没有知情。 假设放在HTML块之后的javascript将应用于该块是合乎逻辑的 - 但这不是js的工作方式。 两个js块都将应用于整个网页。

您需要一种方法将事件（用户执行的操作）与特定按钮连接起来。 通常将ID分配给特定按钮，以便您可以轻松地定位它们，但您也可以使用jQuery根据与其他元素的接近程度来选择按钮。 ID更容易。

尝试这样的事情（非常简单和不优雅的例子，演示不是为了代码卓越：

 var b1=true, b2=false; $('#btnOne').click(function(){ if (b1){ $("#alertOne") .addClass("alert-success") .removeClass("alert-danger") .html("<center><strong>Geoeffnet</strong></center>"); b1=false; }else{ $("#alertOne") .removeClass("alert-success") .addClass("alert-danger") .html("<center><strong>Geschlossen</strong></center>"); b1=true; } }); $('#btnTwo').click(function(){ if (b1){ $("#alertTwo") .addClass("alert-success") .removeClass("alert-danger") .html("<center><strong>Geoeffnet</strong></center>"); b1=false; }else{ $("#alertTwo") .removeClass("alert-success") .addClass("alert-danger") .html("<center><strong>Geschlossen</strong></center>"); b1=true; } }); 

 div{box-sizing:border-box;border:1px solid transparent;} .alert-success{border:1px solid red;} .alert-danger{border:1px solid limegreen;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="alertOne" class="alert alert-danger" role="alert"> <center><strong>Nothing to see</strong></center> </div> <button id="btnOne">Click Me</button> <div id="alertTwo" class="alert alert-danger" role="alert"> <center><strong>Nothing to see</strong></center> </div> <button id="btnTwo">Click Me</button>