0

我正在做一个小项目。

这是小提琴：http: //jsfiddle.net/GJf46/

我需要不可见的按钮来使所有三个 div 在单击时不可见并在单击时再次可见。我试过这样做：

var gone = document.getElementById("invisible");
var div1 = document.getElementById("one");
var div2 = document.getElementById("two");
var div3 = document.getElementById("three");
gone.addEventListener("click", function () {
    if (
    div1.style.visibility == "visible",
    div2.style.visibility == "visible",
    div3.style.visibility == "visible") {
        div1.style.visibility == "hidden";
        div2.style.visibility == "hidden";
        div3.style.visibility == "hidden";
    } else {
        div1.style.visibility == "visible";
        div2.style.visibility == "visible";
        div3.style.visibility == "visible";
    }
});

当文本字段未正确填写时，我还需要一个警告框。它应该只接受我设置的值作为示例。但我不知道该怎么做，我是 javascript 新手。

我想要这一切没有 JQUERY。

4

4 回答 4

0 
div1.style.visibility = "visible";
div2.style.visibility = "visible";
div3.style.visibility = "visible";

等等。

于 2013-08-28T12:17:24.800 回答
0

将您的代码更改为

var gone = document.getElementById("invisible");
var div1 = document.getElementById("one");
var div2 = document.getElementById("two");
var div3 = document.getElementById("three");
gone.addEventListener("click", function (){
    if (
    div1.style.visibility == "visible",
    div2.style.visibility == "visible",
    div3.style.visibility == "visible"
    ){
            div1.style.visibility = "hidden";
            div2.style.visibility = "hidden";
            div3.style.visibility = "hidden";
} else {
    div1.style.visibility == "visible";
    div2.style.visibility == "visible";
    div3.style.visibility == "visible";
}
});

它应该工作:)

于 2013-08-28T12:21:57.923 回答
0

您不小心写了 ==（相等比较）而不是 =（赋值）。可以在此处测试更正后的代码。

weg.addEventListener("click", function () {
    if (
    div1.style.visibility !== "hidden",
    div2.style.visibility !== "hidden",
    div3.style.visibility !== "hidden") {
        div1.style.visibility = "hidden";
        div2.style.visibility = "hidden";
        div3.style.visibility = "hidden";
    } else {
        div1.style.visibility = "";
        div2.style.visibility = "";
        div3.style.visibility = "";
    }
});

visibility我利用了默认值是"visible"( source )的事实。请注意，我明确检查是否visibility为"hidden". 这很重要：visibility最初是一个空字符串，因此测试它是否"visible"会导致按钮在第一次单击时不起作用。可以通过编写div1.style.visibility === "visible" || div1.style.visibility === ""等方式解决此问题，但上述版本较短。

如果你引入一个状态变量，代码可以变得更简洁一些（测试在这里）：

var divsAreVisible = true;
weg.addEventListener("click", function () {
    if (divsAreVisible) {
        div1.style.visibility = "hidden";
        div2.style.visibility = "hidden";
        div3.style.visibility = "hidden";
    } else {
        div1.style.visibility = "";
        div2.style.visibility = "";
        div3.style.visibility = "";
    }
    divsAreVisible = !divsAreVisible;
});
于 2013-08-28T12:25:00.497 回答
0

尝试这个：

gone.addEventListener("click", clickToggle);

function clickToggle() {
    var value = clickToggle.blnVisible ? "visible" : "hidden";
    div1.style.visibility = value;
    div2.style.visibility = value;
    div3.style.visibility = value;
    clickToggle.blnVisible = (value == "hidden");
}

工作小提琴（示例）

于 2013-08-28T12:25:39.173 回答