Question

我是一个相当新的JavaScript，我想制作一个自动背景更改器，具有定时间隔和CSS类更改。目前我的代码没有按预期循环两个背景。你们可以检查它有什么问题吗？

谢谢！

$(document).ready(function() {

  var switcher = 0;

  var counter = setInterval(count, 2000);

  function count() {
    switcher = switcher + 1;
    if (switcher >= 2) {
      switcher = 0;
      return;
    };
  };


  switch (switcher) {

    case 0:
      $("#main-content").removeClass("background1");
      $("#main-content").addClass("background3");
      break;

    case 1:
      $("#main-content").removeClass("background3");
      $("#main-content").addClass("background1");
      break;


  };
});

Answer 1

为什么不使用toggleClass，它更清洁：

$(function () {
    var switcher = 0;
    var counter = setInterval(count, 2000);

    function count() {
        $("#main-content").toggleClass("background1 background3")
    };
});

只需确保为div分配默认类：

<div id="main-content" class="background1">

</div>

Answer 2

将switch()语句移动到区间函数回调中。同时删除return。

function count() {
    switcher = switcher + 1;
    if (switcher >= 2) {
      switcher = 0;
    };
    switch (switcher) {

        case 0:
          $("#main-content").removeClass("background1");
          $("#main-content").addClass("background3");
          break;

        case 1:
          $("#main-content").removeClass("background3");
          $("#main-content").addClass("background1");
          break;
    };

};

JavaScript - 使用CSS Class和setInterval方法更改背景

2 个答案: