Question

所以，我想知道是否可以使它更简单（JavaScript中的重复次数更少），以及是否可以使标题仅在按下按钮时变成黑色（如果按钮是彩色的）。如果问题的第二部分是可能的，则不必更简单，我只是想弄清楚如何使函数仅针对具有特定属性（样式）的标签。这可能吗？

我是编码的新手，我已经尝试了好几个小时，却找不到已经上传的内容...可能是由于我缺乏解决问题的能力。

<!DOCTYPE html>
<html>
<head>
    <title>
        Flood
    </title>
    <link rel="stylesheet" href="Style.css">
    <style>
        h1 {
            text-align: center;
            padding-left: 30%;
            padding-right: 30%;
            width: 40%;
        }

        p {
            font-size: 14pt
        }

    </style>
</head>
<body>
<section class="mainpage">
    <h1 id="FS"> Fun Stuff </h1>
    <div>
        <button id="Red"> Red</button>
        <button id="Blue"> Blue</button>
        <button id="Yellow"> Yellow</button>
        <button id="Blink"> Blink</button>
    </div>
    <div id="explaination">
        <p>Click the buttons at the top to see what I mean.
        </p>
    </div>
</section>
<script>
    const a = document.getElementById("FS");
    const b = document.getElementById("Red");
    const c = document.getElementById("Blue");
    const d = document.getElementById("Yellow");
    const e = document.getElementById("Blink");

    /*reset Functions*/

    function blackFunctionB() {
        a.style.color = "black";
        b.removeEventListener("click", blackFunctionB,);
        b.addEventListener("click", redFunction,);
    }

    function blackFunctionC() {
        a.style.color = "black";
        c.removeEventListener("click", blackFunctionC,);
        c.addEventListener("click", blueFunction,);
    }

    function blackFunctionD() {
        a.style.color = "black";
        d.removeEventListener("click", blackFunctionD,);
        d.addEventListener("click", yellowFunction,);
    }

    function showFunction() {
        a.style.display = "block";
        e.removeEventListener("click", showFunction,);
        e.addEventListener("click", blinkFunction,)
    }

    /*end reset functions*/

    b.addEventListener("click", redFunction,);

    function redFunction() {
        a.style.color = "Red";
        b.removeEventListener("click", redFunction,);
        b.addEventListener("click", blackFunctionB,);
    }

    c.addEventListener("click", blueFunction,);

    function blueFunction() {
        a.style.color = "Blue";
        c.removeEventListener("click", blueFunction,);
        c.addEventListener("click", blackFunctionC,);
    }

    d.addEventListener("click", yellowFunction,);

    function yellowFunction() {
        a.style.color = "Yellow";
        d.removeEventListener("click", yellowFunction,);
        d.addEventListener("click", blackFunctionD,);
    }

    e.addEventListener("click", blinkFunction,);

    function blinkFunction() {
        a.style.display = "none"
        e.removeEventListener("click", blinkFunction,);
        e.addEventListener("click", showFunction,);
    }
</script>
</body>

因此，基本上，当您单击黄色按钮时，它将使块变为黄色，然后，如果您单击蓝色按钮，则将其变为蓝色，但是如果再次单击黄色按钮，则将其变为黑色。另外，当您点击黄色，然后点击蓝色两次，然后再次点击黄色时，它保持黑色。有没有办法让它在已经黄色的情况下按黄色按钮就变成黑色？

Answer 1

您可以使一个函数更通用，并且可以处理所有情况：

function toggleCss(elem, attrib, value) {
    elem.style[attrib] = elem.style[attrib] === value ? "" : value;
}

const fs = document.getElementById("FS");

for (let color of ["red", "blue", "yellow"]) {
    const button = document.getElementById(color);
    button.addEventListener("click", () => toggleCss(fs, "color", color));
}
const button = document.getElementById("blink");
button.addEventListener("click", () => toggleCss(fs, "visibility", "hidden"));

<section class="mainpage">
    <h1 id="FS"> Fun Stuff </h1>
    <div>
        <button id="red"> Red </button>
        <button id="blue"> Blue </button>
        <button id="yellow"> Yellow </button>
        <button id="blink"> Blink </button>
    </div>
    <div id="explanation">
        <p>Click the buttons at the top to see what I mean.</p>
    </div>
</section>

您甚至可以通过在按钮上定义数据属性来使其更通用，这些数据属性指示需要切换哪个CSS属性：

function toggleCss(elem, attrib, value) {
    elem.style[attrib] = elem.style[attrib] === value ? "" : value;
}

const fs = document.getElementById("FS");

for (const button of document.querySelectorAll("button[data-attr]")) {
    button.addEventListener("click", () =>
        toggleCss(fs, button.dataset.attr, button.dataset.value)
    );
}

<section class="mainpage">
    <h1 id="FS"> Fun Stuff </h1>
    <div>
        <button data-attr="color" data-value="red">Red</button>
        <button data-attr="color" data-value="blue">Blue</button>
        <button data-attr="color" data-value="yellow">Yellow</button>
        <button data-attr="visibility" data-value="hidden">Blink</button>
    </div>
    <div id="explanation">
        <p>Click the buttons at the top to see what I mean.</p>
    </div>
</section>

Answer 2

您正在使事情复杂化。只需检查并切换黑色和第二色。您不必一次又一次地注册/注销事件。

function yellowFunction() {
    var clr = a.style.color;
    if(clr.toLowerCase() === 'yellow')
    a.style.color = "black";
else
    a.style.color = "Yellow";
}

我可以更轻松地反转这些按钮吗？

2 个答案: