Question

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

我现在希望文本按特定顺序（红色，蓝色，绿色，红色，蓝色，绿色，红色......）在三种不同颜色（红色，蓝色，绿色）之间切换，但我感到很困惑接近这个。

我已经尝试实施第三个数字来进行模数检查，但是这样做并没有得到我想要的结果，所以我的问题是：那么是否有实现三元开关的方法？< / p>

我不是在寻找任何一个答案，而是更多地朝着正确的方向前进。目前我很难过。

代码如下：

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

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

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

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语句。

将三元交换机添加到按钮 - Javascript

1 个答案: