如何啟用包含空字符串的包含？

Question

為什么我的代碼不起作用？ 我需要在code = ""顯示div。 如果全局變量代碼具有字符串的某些部分，則需要在項目中禁用按鈕。

 let code = ""; $(".button").click(function() { code = code + "z"; console.log(code); }) if (code.includes("z")) { $(".hide").css("display", "visible"); console.log(code); } else if (code.includes("")) { $(".hide").css("display", "none"); console.log(code); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="button">Click me</button> <div class="hide">Im hidden if code = "".</div> 

Answer 1

在您的示例中，if-else是在首次運行腳本時執行的。 因此，代碼永遠不會包含z，並且不會在每次點擊時運行if-else檢查。 嘗試這個。

let code = "";

$(".button").click(function() {
  code = code + "z";
  console.log(code);

  if (code.includes("z")) {
    $(".hide").css("display", "visible");
    console.log(code);

  } else if (code.includes("")) {
    $(".hide").css("display", "none");
    console.log(code);

  }
})

Answer 2

由於if / else是在click事件之外編寫的，因此在頁面加載時它們僅執行一次。 單擊按鈕后，它們根本不執行。 您必須在單擊按鈕時執行條件。

請注意：對於顯示屬性， 可見性不是適當的值（它本身是另一個屬性），請改用block作為屬性值。

 let code = ""; $(".button").click(function() { code = code + "z"; console.log(code); if (code.includes("z")) { $(".hide").css("display", "block"); console.log(code); } else if (code.includes("")) { $(".hide").css("display", "none"); console.log(code); } }); if (code.includes("")) { $(".hide").css("display", "none"); console.log(code); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="button">Click me</button> <div class="hide">Im hidden if code = "".</div> 

Answer 3

您的if語句if (code.includes("z")) {}僅在頁面加載時運行一次，而不是每次單擊按鈕時都運行一次。 相反，您可以將此檢查添加到函數中，並在頁面加載時以及通過調用該函數單擊按鈕時對其進行檢查。

同樣，樣式display: visible無效。 您需要使用display: block代替。

請參見下面的工作示例：

 let code = ""; function checkCode() { if (code.includes("z")) { $(".hide").css("display", "block"); // you can use .show() instead of .css() } else if (code.includes("")) { $(".hide").css("display", "none"); // you can use .hide() instead of .css() } } $(".button").click(function() { code = code + "z"; console.log(code); checkCode(); }); checkCode(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="button">Click me</button> <div class="hide">Im hidden if code = "".</div>