为什么我的jquery只适用于第一个if语句，而忽略了其余的语句？

Question

我有这个脚本代码：

$(document).ready(function() {
                if ($("div[data-content='content-1']").hasClass("slide--current")) {
                    $("body").addClass("mobile-app");
                    $("body").removeClass("web-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-2']").hasClass("slide--current")) {
                    $("body").addClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-3']").hasClass("slide--current")) {
                    $("body").removeClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").addClass("design-app");
                }
            });
        </script>

但出于某种原因，查询只运行第一个脚本代码，如果slide-current应用于不同的数据内容，则不会执行后续操作，我尝试向每个脚本添加一个else if，但没有修复任何问题。同样，当data-content 2 and 3有“幻灯片”类时--由于某种原因，我的脚本中没有任何内容适用.

我是不是走错路了？

Answer 1

这是一个幻灯片，基于我可以从您的代码中扣除的内容。

​

$(function() {
  // Slideshow
  const $contents = $("div[data-content^='content']"); // starts with content
  const appClasses = ["mobile-app", "web-app", "design-app"]; // your three other classes
  const len = appClasses.length; // how many?
  let cnt = 0;
  let tId = setInterval(() => {
      appClasses.forEach((cls, i) => { // run over the list of types of content
        $contents.eq(i)[i === cnt ? "addClass" : "removeClass"]("slide--current"); // if the counter matches the index of the class, add else remove
        $("body")[i === cnt ? "addClass" : "removeClass"](cls)
      });
      cnt++;
      if (cnt >= len) cnt = 0; // wrap
    },
    2000)
});

.mobile-app {
  background-color: green;
}

.web-app {
  background-color: yellow;
}

.design-app {
  background-color: red;
}

.slide--current {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div data-content="content-1">One</div>
<div data-content="content-2">Two</div>
<div data-content="content-3">Three</div>

​