Question

我正在尝试根据布尔值进行按钮更改状态。看起来它会起作用，我认为它会变成白色。

知道为什么吗？请帮忙。

function dropDown(){
    var isClicked = false;
    var button = document.getElementById("bigbutton");

    if(isClicked == false){
        button.style.backgroundColor = "red";
        isClicked = true;
    }

    if(isClicked == true){
        button.style.backgroundColor = "white";
        isClicked = false;
    }        
}

Answer 1

您需要使用else或return。现在，您将isClicked设置为false，获取元素，然后运行第一个if块。然后将isClicked设置为true，然后运行第二个if块。你可能想要的是：

if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = false;
} else {
    button.style.backgroundColor = "red";
    isClicked = true;
}

但是，这可能也行不通，因为isClicked是此函数的本地函数，因此始终为false。你应该做的是检查按钮的属性，也许是backgroundColor，并将其用作条件：

var bgColor = button.style.backgroundColor
if(bgColor === "red"){
    button.style.backgroundColor = "white";
} else {
    button.style.backgroundColor = "red";
}

Answer 2

您有两个单独的(function ($) { 'use strict'; $("#updatersvpform").submit(function (event) { event.preventDefault(); $("#updateloading").css("display", "inline-block"); $.post("updatersvp.php", { updateaddress1: $("#updateaddress1").val() }) .done(function (data) { if (data) { $("#updateloading").hide(); $("#UpdateSuccess").slideDown("slow"); setTimeout(function () { $("#FullField").slideUp("slow"); }, 1500); setTimeout(function () { $("#FullField").html(data); }, 2300); setTimeout(function () { $("#FullField").slideDown("slow"); }, 3500); $("#updatersvpform")[0].reset(); } else { $("#updateloading").hide(); $("#UpdateError").slideDown("slow"); setTimeout(function () { $("#UpdateError").slideUp("slow"); }, 1000); } }); }); })(jQuery);语句。第二个总是在第一个之后运行。因此，当第一个完成时，它已将if设置为isClicked，因此第二个运行并看到true值并将颜色设置为白色。

您需要将这两个陈述合并为一个或另一个＆＃34;使用true分支进行操作。此外，对于布尔值，您不需要在else语句中明确测试true或false，因为if条件始终会针对if进行评估}。

true

说完这个后，您的函数会立即将function dropDown(){ var isClicked = false; var button = document.getElementById("bigbutton"); // This implicitly tests isClicked for true if(isClicked){ button.style.backgroundColor = "white"; isClicked = true; } else { // If the earlier condition failed, the else branch is automatically run button.style.backgroundColor = "red"; isClicked = false; } }设置为isClicked，因此您总是会落入false分支。您不应该为此设置初始值，而是将变量声明为更高的范围，如下所示：

else

最后，如果我理解你的情况，你可能根本不需要JavaScript：

＆＃13;

// We'll declare these at a higher scope so we don't keep establishing them
// every time the function runs:
var isClicked = null;
var button = document.getElementById("bigbutton");

function dropDown(){
  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

＆＃13;

button { background-color:white;}
button:active { background-color:red;}

＆＃13;

Answer 3

您的javascript代码将自上而下运行。因此，您首先使用isClicked false，以便满足第一个if，将背景设置为红色。在if中设置isclicked为true，这样就可以满足下一个if语句，将背景颜色变为白色。

最终结果是您的背景颜色为白色。

您可能希望在“点击”按钮上设置isclicked。按钮事件。

Answer 4

此代码段实际上没有意义，您应该将点击值作为事件，如果您在代码中将其设置为false，则无法获得任何内容。

$( "#yourButtonID" ).click(function() {
     button.style.backgroundColor = "white";
});

在函数外部（在页面加载中，在我的示例中）将颜色设置为红色：

$( document ).ready(function() {
     button.style.backgroundColor = "red";
});

Javascript条件运算符不能正常运行我的想法

4 个答案: