循环数组以替换DIV类

Question

我有一个带有全屏横幅和中央进入按钮的落地页。我的问题是如何使按钮保持可见性。需要根据背景是暗色或亮色将其类从.dark更改为.light。

我已经尝试过使用jQuery来解决这个问题。我查阅了很多解决方案，但都不是我所需要的。我想要实现渐变效果的转换，即从更改每个DIV到“如果可能”的过渡，并制作与背景图像颜色匹配的数组，以便按钮会根据我的数组更改颜色。虽然存在重复的问题，但我希望强调这个问题在stack overflow上是独一无二的，我无法在其他地方找到答案。请注意，需要保留HTML标记。

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

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

   },
   10000
);
  });

我不知道如何将此移动到数组中或添加转换效果，并且...我认为这可能只是用一个单独的 DIV 替代，而不仅仅是替换我的 DIV 中的类。

我还看过这个：

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

然而，这似乎不能正常运行，我不确定该如何解决？有人能帮我解决这个难题吗？

编辑：

<div class="door">
    <img src="img/logo-inv.png">
    <br>
    <a href="#" class="btn btn-dark">ENTER</a>
</div>

为避免混淆，我已经简化了代码。我想要更改的标签是“btn-dark”。

- Luke C

---

使用jQuery切换类，就像这样。 - reergymerej

你如何判断背景是浅色还是深色？有没有可以在背景上引用的类或ID？同时，看一些HTML代码会很好。 - AfromanJ

我现在会添加到HTML中。我本来打算手动设置数组中的类，考虑到数组循环。这样可以消除我的脚本复杂化的需要...滑块不是很大，所以手动设置数组类对我来说并不是一项巨大的工作！ - Luke C

所以，你的横幅实际上是一个包含多个图像的滑块，对吧？图像会根据计时器自动更改吗？"DIV"和"button"是同一件事吗？按钮的颜色是唯一会改变的参数吗（href、文本等呢）？ - user1636522

是的，我有一个计时器，可以与我的div类更改匹配。这个时间设置为“4000”。 - Luke C

Answer 1

试一下这个

演示

如果您需要循环切换类，您应该使用setInterval()。

代码

$(document).ready(function () {
    setInterval(function () {
        $(".one").toggleClass("main");
    }, 1000);
});

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

希望这能帮到你，谢谢。

- SarathSprakash

---

可以的！我如何切换数组的类？所以也许我的数组想要是“light”，“light”，“dark”，“light”？ - Luke C

切换意味着只有两种可能性。 “切换数组的类别”这是什么意思？ - SarathSprakash

抱歉，我不太熟悉JS和jQuery。我想在一个数组中替换类。可能是一个由“removeClass”和“addClass”组成的数组。我不确定，我只是不知道如何构建它。 - Luke C

你不能使用removeClass和addClass在数组中替换类，对于数组来说它只是一个字符串，你可以匹配要删除的字符串并将其从数组中移除。 - SarathSprakash

好的，我明白了。那么你能添加一个div id，并在脚本中匹配它吗？例如： <div id="button">。然后，在数组中添加一个类并用时间延迟替换同样的类，再循环这个数组？ - Luke C

这是它的链接http://jsfiddle.net/sarathsprakash/38bDL/8/，但是你只能使用toggleClass有两种可能性。 - SarathSprakash

Answer 2

两个例子都使用相同的标签：`

`。

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

---

不需要渐变效果: http://jsfiddle.net/wared/G68ww/。 map 数组旨在简化维护，以防您稍后需要更改类名。

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);

---

使用 jQuery Color插件 实现淡入淡出效果：http://jsfiddle.net/wared/Npj5e/。请注意，lightgray不被支持（在演示中替换为rgb(211, 211, 211)）。

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);

- user1636522

Answer 3

您可以使用一个数组来替换类，如下所示：

$(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;
}

演示

- AfromanJ

---

这个可以用！！ :) 我已经修改了它以适应我的代码。是否可能通过淡入淡出来过渡更改，或者必须更改为不同的div才能实现？ - Luke C

你可以将 CSS 的 ease 属性添加到 .one 类中。例如：.one { transition: all 1s ease-in-out; }。 - AfromanJ

谢谢@AfromanJ！我注意到这是在更改DIV。这是我的误解导致的错误。我想要替换一个a链接的类。我能否将“var $div”更改为“var $a”，以便在<a class="">链接上产生相同的效果？ - Luke C

可以的。那只是一个变量名，可以随意命名。 - AfromanJ