我可以自己更轻松地反转这些按钮吗？答案

【问题标题】：Can I reversing these buttons easier on myself?我可以自己更轻松地反转这些按钮吗？
【发布时间】：2019-05-02 04:56:42
【问题描述】：

所以，我想知道我是否可以让这更简单（在 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>

所以基本上，当你点击黄色按钮时，它会使块变成黄色，然后如果你点击蓝色按钮，它就会变成蓝色，但是如果你再次点击黄色按钮，它就会变成黑色。或者，当你击中黄色然后蓝色两次然后再次黄色时，它会保持黑色。有没有办法让它只有在它已经是黄色时才按黄色按钮才变黑？

【问题讨论】：

您的要求不明确。你能准备一个简单的预期行为列表吗？

标签： javascript html css

【解决方案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>

【讨论】：

超级智能:)

【解决方案2】：

你把事情复杂化了。只需检查并切换黑色和第二种颜色。您不必一次又一次地注册/注销事件。

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

【讨论】：