求助：如何让Qualtrics滑块值在参与者释放鼠标左键前隐藏？

别担心，我会一步步带你搞定这个需求，完全不用怕代码复杂～

核心思路 #

我们要实现的效果逻辑很简单：

• 页面加载完成后，默认把滑块的数值显示区域隐藏起来
• 当用户拖动滑块松开鼠标左键的瞬间，再把数值显示出来
• 同时照顾到用键盘调整滑块的用户，确保他们操作时的体验一致

具体操作步骤 #

1. 在Qualtrics里打开你的滑块问题，点击问题右上角的「齿轮」图标，选择「Add JavaScript」
2. 把下面的代码复制粘贴进去，替换掉原来的默认代码即可

Qualtrics.SurveyEngine.addOnload(function() {
    // 获取滑块的数值显示元素
    const sliderValueElement = this.questionContainer.querySelector('.SliderText');
    
    // 页面加载时先隐藏数值
    if (sliderValueElement) {
        sliderValueElement.style.display = 'none';
    }
    
    // 获取滑块的拖动手柄元素
    const sliderHandle = this.questionContainer.querySelector('.noUi-handle');
    
    if (sliderHandle) {
        // 监听鼠标松开事件，显示数值
        sliderHandle.addEventListener('mouseup', function() {
            if (sliderValueElement) {
                sliderValueElement.style.display = 'block';
            }
        });
        
        // 监听鼠标按下事件（拖动开始时），再次隐藏数值
        sliderHandle.addEventListener('mousedown', function() {
            if (sliderValueElement) {
                sliderValueElement.style.display = 'none';
            }
        });
    }
    
    // 处理键盘操作：松开方向键/回车时显示数值
    this.questionContainer.addEventListener('keyup', function(e) {
        const allowedKeys = [37, 38, 39, 40, 13]; // 对应左右上下方向键+回车键
        if (allowedKeys.includes(e.keyCode) && sliderValueElement) {
            sliderValueElement.style.display = 'block';
        }
    });
    
    // 处理键盘操作：按下方向键时隐藏数值
    this.questionContainer.addEventListener('keydown', function(e) {
        const allowedKeys = [37, 38, 39, 40];
        if (allowedKeys.includes(e.keyCode) && sliderValueElement) {
            sliderValueElement.style.display = 'none';
        }
    });
});

简单代码说明（怕你好奇） #

• addOnload：这是Qualtrics自带的触发机制，页面加载完成后会自动运行这段代码
• .SliderText：Qualtrics里专门用来显示滑块数值的元素类名，我们就是通过它找到要隐藏的文字
• mouseup/mousedown：分别监听鼠标松开和按下的动作，对应显示/隐藏数值
• 键盘事件部分：照顾到不用鼠标、只用方向键调整滑块的用户，保证他们的操作体验和鼠标用户一致

测试一下 #

保存代码后，点击Qualtrics的「Preview」预览功能，拖动滑块试试：拖动过程中数值会被隐藏，松开鼠标就会立刻显示；用方向键调整的话，按住方向键时数值隐藏，松开按键就会显示～

如果遇到数值还是没隐藏的情况，可能是你的Qualtrics版本里滑块元素的类名有细微差异？可以告诉我你的版本信息，我再帮你调整代码～

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