如何使用jQuery为动态高度的.spacer元素增减40px高度？

原代码存在的问题 #

• 直接将jQuery对象spacer与数字相加会触发类型错误，无法正确计算高度
• 缺少状态记录逻辑，无法实现“点击切换增减”的需求

修正方案 #

通过状态标记和正确获取当前高度来实现切换逻辑：

HTML结构

<div class="spacer"></div>

JavaScript代码

const spacer = $(".spacer");
// 初始化状态：标记是否已为元素增加过高度
spacer.data("isHeightIncreased", false);

$(".profile-header-wrapper .search-icon").on("click", function(){
    fixedVideo.toggleClass("fixed-video-position");
    
    // 获取当前元素的实际高度（返回纯数值，不带单位）
    const currentHeight = spacer.height();
    const isIncreased = spacer.data("isHeightIncreased");
    
    if (isIncreased) {
        // 已增加过，执行减40px操作
        spacer.height(currentHeight - 40);
        spacer.data("isHeightIncreased", false);
    } else {
        // 未增加，执行加40px操作
        spacer.height(currentHeight + 40);
        spacer.data("isHeightIncreased", true);
    }
});

补充说明 #

• 使用height()方法获取高度更便捷：它返回纯数值，无需额外处理单位；如果需要包含padding和border的高度，可替换为outerHeight()
• 通过jQuery的data()方法存储状态，避免全局变量污染，逻辑更清晰

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