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事件之外编写的，因此在页面加载时它们仅执行一次。单击按钮后，它们根本不执行。您必须在单击按钮时执行条件。

请注意：对于visibility属性，display不是正确的值（它本身是另一个属性），请使用 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>

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

3 个答案: