JavaScript中可连续使用两个if语句吗？类名切换异常求助

• 需求：点击元素切换数组文本，显示特定数组值时给元素加bottomskill类（数组中3个值需靠此类调整居中样式）
• 遇到的问题：
  • 当前代码类未生效
  • 尝试className/classList的replace/add/remove方法，要么数组值被改，要么类不生效
  • 直接修改top、颜色属性无效果
  • 把第二个if的双等号改成单等号时类生效，但其余值被覆盖为undefined
• 疑问：
  • 连续两个if没加else分支是否有问题？
  • 页面里两个同circle类名的元素会不会影响效果？

1. 核心逻辑错误：索引与元素值搞混
   原代码里if (i == skills1[1])是把数字索引i和字符串元素skills1[1]（也就是"Word"）做比较，永远不会相等，类切换逻辑直接失效。
2. 索引更新时机错了
   先执行x.innerHTML = skills1[i++]，i已经自增，后面判断的是下一个元素的索引，不是当前显示元素的索引，逻辑完全错位。
3. 类名覆盖风险
   用x.className = "xxx"会直接替换所有类名，后续加其他类容易冲突，用classList方法更稳妥。
4. 关于多个circle元素的疑问
   完全不影响，目标元素是通过唯一id="multitask1"获取的，和其他circle元素没关系。

JavaScript #

var skills1 = ["Excel", "Word", "Power Bi", "Power Point"];
var i = 0;

function MultiTaskSwitch1() {
  var x = document.getElementById("multitask1");
  // 先渲染当前元素，再处理类名
  x.innerHTML = skills1[i];
  
  // 按需判断：给Word、Power Bi、Power Point加bottomskill类（可根据需求调整条件）
  if (skills1[i] === "Word" || skills1[i] === "Power Bi" || skills1[i] === "Power Point") {
    x.classList.add("bottomskill");
    x.classList.remove("skillsset");
  } else {
    x.classList.add("skillsset");
    x.classList.remove("bottomskill");
  }
  
  // 最后更新索引，避免逻辑错位
  i++;
  if (i === skills1.length) {
    i = 0;
  }
}

CSS #

.skillsset {
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  word-wrap: break-word;
  position: relative;
  top: 0px;
}

.circle {
  width: 108px;
  height: 93px;
  border-radius: 50%;
  background-color: black;
  text-align: center;
  border-style: solid;
  border-width: 2px;
  border-color: aqua;
  /* 加flex布局辅助内部元素居中，减少top属性依赖 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottomskill {
  font-size: 20px;
  font-weight: bold;
  color: pink;
  text-align: center;
  word-wrap: break-word;
  position: relative;
  top: 15px;
}

HTML #

<!-- 显示文本的DIV，嵌套在圆形容器内 -->
<div class="circle skills">
  <p class="skillsset" onclick="MultiTaskSwitch1()" id="multitask1">Click<br> Me</p>
</div>

• 用classList.toggle()简化类切换逻辑：

  const needBottomClass = skills1[i] === "Word" || skills1[i] === "Power Bi" || skills1[i] === "Power Point";
  x.classList.toggle("bottomskill", needBottomClass);
  x.classList.toggle("skillsset", !needBottomClass);
  

• 给.circle加flex布局，能更稳定地实现内部元素居中，减少对position: relative和top属性的依赖，避免不同文本长度导致的偏移问题。

内容的提问来源于stack exchange，提问作者ThatOneCoder56