Question

我正在尝试显示帮助消息的帮助按钮，如果再次点击它，帮助消息就会消失（我将不透明度更改为0）。我希望它可以打开和关闭。我尝试了if语句，按钮完全停止工作。这是我的javascript：

function messageToggle() {
    if (document.getElementById("helpMessage").style.opacity = "1.0") {
        document.getElementById("helpMessage").style.opacity = "0";

    } else {
        document.getElementById("helpMessage").style.opacity = "1.0";
    }
}

这是我的HTML：

<button onclick="messageToggle()">Help</button>
<p id="helpMessage">Help Message Goes Here</p>

有关如何使这项工作的任何建议吗？

Answer 1

在编写条件时，您应该使用比较运算符（==或===）：

if (document.getElementById("helpMessage").style.opacity == 1) {
  ...
}

程序中的代码在语法上是正确的，但执行赋值（而不是比较）将始终导致＆＃34; true＆＃34;科。因此，帮助信息完全消失。

Answer 2

如果您想要打开和关闭它，请参阅以下代码

function messageToggle() {
  $("#helpMessage").toggle("slow", function() {
    
    //animation done

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="messageToggle()">Help</button>
<p id="helpMessage">Help Message Goes Here</p>

Answer 3

使用==而不是=和1而不是1.0
更正：

＆＃13;

document.getElementById("helpMessage").style.opacity = "1.0";

function messageToggle(){
var op = document.getElementById("helpMessage").style.opacity;
console.log(op);
if(document.getElementById("helpMessage").style.opacity == "1"){
     document.getElementById("helpMessage").style.opacity = "0"; 
	 console.log("0");

}else{
      document.getElementById("helpMessage").style.opacity = "1"; 
	  console.log("Else");
}

}

＆＃13;

<button onclick="messageToggle()">Help</button>
<p id="helpMessage">Help Message Goes Here</p>

＆＃13;

如果其他声明切换为A＆＃39;帮助＆＃39;按键

3 个答案: