Javascript 循环数组以替换DIV类

我有一个带有整版横幅和中央回车按钮的登录页。我的问题是，要保持按钮的可见性。我需要将其类别从

.dark

更改为

.light

，具体取决于背景是深色还是浅色

我已经考虑过在与我的滑块匹配的设定时间内更改DIV，并制作一个与背景图像颜色匹配的数组，这样按钮将根据我的数组更改颜色。 我还希望从更改每个DIV到“如果可能”的过渡是淡入淡出过渡

我知道我在这里有重复文章的风险，但我想强调这个问题是堆栈溢出所特有的，我在别处找不到我的答案

自行车跳水似乎有很多解决办法，但我需要找到一个适合我的问题

好的，从我所读到的内容来看，我已经用jQuery尝试过这一点：

$(window).load(function(){
 setTimeout(
  function(){

      $('#one').replaceWith($('#two'));
      $('#two').show();

   },
   10000
);
  });

我不知道如何将其移动到数组中或添加转换，以及。。我相信这可能只是替换为一个单独的DIV，而不是替换我DIV中的类

我也研究过这一点：

$(document).ready(function(){
    window.setTimeout(function(){
        $(".one").replaceClass(".two");
    },100);
});

然而，这似乎不起作用，我不确定如何修复？有人能帮我解决这个难题吗

编辑：

我简化了代码以避免混淆。我想更改的标签是“btn黑暗”。

试试这个

如果需要循环切换类，则应使用

setInterval（）

代码 注意：使用toggleClass只能有两种可能性

---

希望这能有所帮助，谢谢

两个示例使用相同的标记：

<a style="display:block;width:200px;height:200px;"></a>

---

包括使用以下选项进行淡入淡出：。请注意，

lightgray

不受支持（在演示中替换为

rgb（211211211211211）

）

---

可以使用数组替换类，如下所示：

$(document).ready(function () {
    var myClasses = ["light", "light", "dark", "light"];
    var count = 0;

    setInterval(function () {
        $(".one").removeClass("light dark").addClass(myClasses[count]);
        count >= 3 ? count = 0 : count += 1;
    }, 1000);

});

我正在使用

setInterval（）

每1秒执行一次函数（

1000

）

具有淡入淡出效果

我们只需要添加下面的CSS

.one {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

---

tl；dr使用类似jQuery的工具切换类。如何判断背景是亮的还是暗的？是否有可以在后台引用的类或ID？还有一些HTML会很好看到。我现在将添加到HTML。考虑到数组循环，我打算手动设置数组中的类。这样就不需要使我的脚本复杂化。。滑块不是很大，所以手动设置数组类对我来说不是一件大工作！所以，你的横幅实际上是一个包含多个图像的滑块，对吗？图像是否根据计时器自动更改？“DIV”和“button”是一回事吗？按钮的颜色是唯一改变的参数（关于

href

，text，…）吗？是的，我有一个计时器，可以与更改div类相匹配。这个时间设置为“4000”，这很有帮助是的！如何切换数组的类。所以，也许我的数组想要“亮”、“亮”、“暗”、“亮”？切换意味着只有两种可能。“为数组切换类”这是什么意思？对不起，我不太熟悉JS和jQuery。我想替换数组中的类。因此，它可能是“removeClass”和“addClass”的数组。我不确定，我只是不知道如何构造它。你不能用removeClass和addClass替换数组中的类，因为数组只是一个字符串，你可以匹配你要删除的字符串，并从arrayOkay中删除它，所以你可以在脚本中添加一个div id并匹配它；例如然后添加一个类并在数组中用时间延迟替换同一个类，然后循环该数组？这有效！！：）我已经修改了这个以使用我的代码。是否可以使用淡入淡出来转换更改，或者如果不更改为其他div，则无法转换？您可以将CSS

ease

添加到您的

.one

类中。e、 g

.one{转换：所有1都轻松进出；}

谢谢@AfromanJ！我注意到这是在改变一个DIV。这是我的错误，沟通错误。我想替换链接的类。我可以将'var$div'更改为'var$a'吗？可以。这只是一个变量名，它可以是任何你喜欢的。

var classes = ['dark', 'light'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').addClass(
    classes[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').removeClass(classes.join(' ')).addClass(
        classes[map[i++ % map.length]]
    );
}, 1000);

var colors = ['gray', 'rgb(211, 211, 211)'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').css(
    'backgroundColor', colors[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').animate({
        backgroundColor: $.Color(
            colors[map[i++ % map.length]]
        )
    });
}, 1000);

$(document).ready(function () {
    var myClasses = ["light", "light", "dark", "light"];
    var count = 0;

    setInterval(function () {
        $(".one").removeClass("light dark").addClass(myClasses[count]);
        count >= 3 ? count = 0 : count += 1;
    }, 1000);

});

.one {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}