javascript - 将三元开关添加到按钮 - Javascript

Question

我写了一个小脚本来切换文本元素的可见性。每次元素变为可见时，它的颜色都会从蓝色变为红色或从红色变为蓝色。

我现在希望文本以特定顺序(红色、蓝色、绿色、红色、蓝色、绿色、红色...)在三种不同颜色(红色、蓝色、绿色)之间变化，但我很困惑如何来解决这个问题。

我已经尝试实现第三个数字来进行模数检查，但这样做并没有产生我正在寻找的结果，所以我的问题是:是否有实现三元开关的方法？

我不是在寻找任何一个答案，而是在寻找正确方向的插入力。目前我很难过。

代码如下:

var visible = false;
var hiddenCount = 0;
var pElement = document.getElementById("testVisibility");
function showElement() { 
    if ( visible = !visible ) {
        if ( hiddenCount % 4 == 0 ) {
            pElement.style.color = "red";
        } else if ( hiddenCount % 2 == 0 ) {
            pElement.style.color = "blue";
        }
        pElement.style.visibility = "visible";
    } else {
        pElement.style.visibility = "hidden";
    }
    hiddenCount++;
}

Answer 1

一个简单的方法是将颜色放入一个数组中，并维护一个根据需要递增的计数器。然后使用计数器从数组中获取索引。

您可以使用取模运算符使索引永远不会超过数组的顶部索引。

var visible = false;
var hiddenCount = 0;
var pElement = document.getElementById("testVisibility");
var colors = ["red", "blue", "green"]

function showElement() { 
    if ((visible = !visible)) { // Use the modulus to get index
        pElement.style.color = colors[hiddenCount % colors.length];
        pElement.style.visibility = "visible";
    } else {
        pElement.style.visibility = "hidden";
    }
    hiddenCount++;
}

我将 hiddenCount 保留在您拥有它的底部，尽管它总是递增，即使在隐藏时也是如此。如果您总是希望在显示时看到下一个颜色，则将增量移动到 if 语句。