我怎樣才能告訴在這個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"> 
 
\t <center><strong>Nothing to see</strong></center> 
 
</div> 
 
<button id="btnOne">Click Me</button> 
 

 
<div id="alertTwo" class="alert alert-danger" role="alert"> 
 
\t <center><strong>Nothing to see</strong></center> 
 
</div> 
 
<button id="btnTwo">Click Me</button>