JavaScript为标签追加类：点击图标切换标题时背景样式不生效问题

问题分析 #

当前代码能正常切换标题的显示/隐藏，但背景颜色无变化，核心问题在于：

1. let mini = document.querySelector(".box_mini"); 仅获取了页面中第一个.box_mini元素，无法对当前点击图标对应的父盒子进行操作
2. else分支中$(mini).ready(function () { $(this).toggleClass('background'); }); 逻辑错误：ready事件仅在DOM加载完成时触发，此处完全多余；且内部this指向的是document而非目标盒子

解决方案 #

直接在图标点击事件中获取当前对应的.box_mini父元素，根据图标状态控制背景类的添加/移除，以下提供两种实现方式：

方式1：纯JavaScript实现

document.querySelectorAll('.box_icon').forEach(eye => {
    eye.addEventListener("click", function() {
        let excerpt = this.parentNode.querySelector(".title_box");
        // 获取当前图标对应的父盒子.box_mini
        const parentBox = this.parentElement;
        
        if (this.classList.contains("bi-play-circle-fill")) {
            this.classList = "bi bi-power box_icon";
            excerpt.style.display = "block";
            // 显示标题时移除背景类
            parentBox.classList.remove('background');
        } else {
            this.classList = "bi bi-play-circle-fill box_icon";
            excerpt.style.display = "none";
            // 隐藏标题时添加背景类
            parentBox.classList.add('background');
        }
    });
});

方式2：结合jQuery实现（复用你之前的类切换逻辑）

$(document).ready(function() {
    $('.box_icon').click(function() {
        const $excerpt = $(this).siblings(".title_box");
        const $parentBox = $(this).parent(".box_mini");
        
        if ($(this).hasClass("bi-play-circle-fill")) {
            $(this).removeClass("bi-play-circle-fill").addClass("bi bi-power box_icon");
            $excerpt.show();
            $parentBox.removeClass('background');
        } else {
            $(this).removeClass("bi-power").addClass("bi-play-circle-fill box_icon");
            $excerpt.hide();
            $parentBox.addClass('background');
            // 如果需要点击多次来回切换背景类，可替换为：
            // $parentBox.toggleClass('background');
        }
    });
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<style>
.box_main {
    display: flex;
    justify-content: space-around;
}

.box_mini {
    width: 250px;
    height: 200px;
    background: #5ec7ff;
    box-shadow: 0 0 4px #000;
    transition: all 0.5s ease;
}

.box_icon {
    font-size: 25px;
    margin: 10px 45% 6px;
    color: #7f7f7f;
}

.title_box {
    font-size: 45px;
    margin: 25px 0;
    color: #f9ff4d;
    text-align: center;
    display: none;
}

.background{
    background: #c9e955;
    transition: all 0.5s ease;
}
</style>
<section class="box_main">
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
</section>
<script>
document.querySelectorAll('.box_icon').forEach(eye => {
    eye.addEventListener("click", function() {
        let excerpt = this.parentNode.querySelector(".title_box");
        const parentBox = this.parentElement;
        
        if (this.classList.contains("bi-play-circle-fill")) {
            this.classList = "bi bi-power box_icon";
            excerpt.style.display = "block";
            parentBox.classList.remove('background');
        } else {
            this.classList = "bi bi-play-circle-fill box_icon";
            excerpt.style.display = "none";
            parentBox.classList.add('background');
        }
    });
});
</script>

关键改动说明 #

• 通过this.parentElement（纯JS）或$(this).parent(".box_mini")（jQuery）精准获取当前点击图标对应的父盒子，避免操作错误的元素
• 严格匹配需求逻辑：显示标题时移除背景类，隐藏标题时添加背景类
• 移除了多余的ready事件绑定，所有操作直接在图标点击事件内完成

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