使用JavaScript高效管理元素CSS类：实现动态显示与常见问题解析

<div class="swiper-slide">
    <!-- 这是一个用于触发事件的图标按钮 -->
    <i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()">点击我切换</i>

    <div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
        <div class="services-item__content">
            <!-- 目标元素，其类将根据点击事件进行切换 -->
            <div class="text_area_box" id="text_area_box">
                <input type="text" name="" required="">
                <label>Titre</label>
            </div>        
        </div>
    </div>
</div>

/* 默认状态：隐藏输入框 */
.text_area_box {
    position: relative;
    display: none; /* 关键：隐藏元素 */
    font-size: xx-large;
    color: red;
}

/* 激活状态：显示输入框 */
.text_area_box_active {
    position: relative;
    display: block; /* 关键：显示元素 */
}

function update_function() {
    // 获取目标元素
    var element = document.getElementById("text_area_box");

    // 检查元素当前是否包含 'text_area_box' 类
    if (element.classList.contains('text_area_box')) {
        // 如果包含，则移除 'text_area_box' 并添加 'text_area_box_active'
        element.classList.remove('text_area_box');
        element.classList.add('text_area_box_active');
    } else {
        // 如果不包含（即包含 'text_area_box_active'），则移除 'text_area_box_active' 并添加 'text_area_box'
        element.classList.remove('text_area_box_active');
        element.classList.add('text_area_box');
    }
}

function update_function_toggle() {
    var element = document.getElementById("text_area_box");
    // 切换 'text_area_box' 类。如果存在则移除，如果不存在则添加。
    // 注意：这里需要确保这两个类是互斥的，即要么是A，要么是B。
    // 如果是切换两个互斥类，可以先移除一个，再toggle另一个，或者使用一个通用类名来toggle。
    // 更直接的做法是，只toggle一个类，让CSS根据这个类的存在与否来决定样式。

    // 假设我们有一个默认的隐藏类 'hidden-box' 和一个显示类 'active-box'
    // 我们可以这样设计：
    // CSS:
    // .text_area_box { display: none; }
    // .text_area_box.active { display: block; }
    // JS:
    element.classList.toggle('active'); 
    // 这样，当 'active' 类存在时，它会显示；不存在时，会隐藏（因为 .text_area_box 默认是 display: none;）

    // 对于本教程的场景，如果希望严格在两个类之间切换，可以这样写：
    if (element.classList.contains('text_area_box')) {
        element.classList.remove('text_area_box');
        element.classList.add('text_area_box_active');
    } else {
        element.classList.remove('text_area_box_active');
        element.classList.add('text_area_box');
    }
    // 或者，更巧妙地使用 toggle：
    // element.classList.toggle('text_area_box'); // 如果是 'text_area_box'，则移除
    // element.classList.toggle('text_area_box_active'); // 如果是 'text_area_box_active'，则移除；否则添加
    // 这种方式如果初始状态不对，可能导致两个类同时存在或同时不存在，所以要谨慎使用。
    // 最稳妥还是用 if/else 或者只toggle一个控制类。
}

.text_area_box { display: none; }
.text_area_box.is-active { display: block; } /* 默认隐藏，当有 is-active 类时显示 */

function update_function_simplified() {
    var element = document.getElementById("text_area_box");
    element.classList.toggle('is-active'); 
}

// 在页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    var updatePen = document.getElementById('update_pen');
    var textAreaBox = document.getElementById('text_area_box');

    if (updatePen && textAreaBox) {
        updatePen.addEventListener('click', function() {
            // 使用简化后的 toggle 逻辑
            textAreaBox.classList.toggle('is-active'); 

            // 如果坚持使用最初的两个类互斥切换逻辑，可以这样写：
            // if (textAreaBox.classList.contains('text_area_box')) {
            //     textAreaBox.classList.remove('text_area_box');
            //     textAreaBox.classList.add('text_area_box_active');
            // } else {
            //     textAreaBox.classList.remove('text_area_box_active');
            //     textAreaBox.classList.add('text_area_box');
            // }
        });
    }
});