JS干货分享 | 揭秘排他思想，快速驾驭JS

前端

2023-10-16 07:19:57

排他思想：独占鳌头的秘诀

在前端开发中，排他思想是一种思维模式，它指导我们如何处理同组元素之间的关系。其核心思想就是：排除其他元素，只设置当前元素。

具体来说，排他思想的实现步骤如下：

清除所有同组元素： 将所有同组元素的特定样式或状态清除。
设置当前元素： 为当前需要操作的元素设置所需的样式或状态。

通过这两个步骤，就能让当前元素成为同组元素中唯一的「独行侠」，实现独占鳌头的效果。

实战演练：排他思想的妙用

排他思想在JS开发中有着广泛的应用，下面就让我们通过几个实战案例来领略它的威力：

1. 切换激活状态：

const tabs = document.querySelectorAll(".tab");
tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    // 清除其他选项卡的激活状态
    tabs.forEach((otherTab) => {
      otherTab.classList.remove("active");
    });
    // 设置当前选项卡的激活状态
    tab.classList.add("active");
  });
});

2. 展示隐藏元素：

const elements = document.querySelectorAll(".element");
const showBtn = document.querySelector(".show-btn");
showBtn.addEventListener("click", () => {
  // 清除所有元素的隐藏状态
  elements.forEach((element) => {
    element.classList.remove("hidden");
  });
  // 设置当前元素的显示状态
  element.classList.add("visible");
});

3. 滑动轮播：

const slides = document.querySelectorAll(".slide");
let currentSlideIndex = 0;

// 清除其他幻灯片的显示状态
const hideOtherSlides = () => {
  slides.forEach((slide, index) => {
    if (index !== currentSlideIndex) {
      slide.classList.remove("active");
    }
  });
};

// 设置当前幻灯片的显示状态
const showCurrentSlide = () => {
  slides[currentSlideIndex].classList.add("active");
};

4. 排他选择：

const choices = document.querySelectorAll(".choice");
choices.forEach((choice) => {
  choice.addEventListener("click", () => {
    // 清除其他选项的选中状态
    choices.forEach((otherChoice) => {
      otherChoice.classList.remove("selected");
    });
    // 设置当前选项的选中状态
    choice.classList.add("selected");
  });
});