javascript - 如何使用 HTML 代码更改滑块拇指的可见性？

Question

我正在使用 jsPsych 进行行为实验。在研究中，参与者会看到一个滑块，他们应该拖动它来做出响应。但是，我不希望参与者在单击滑块之前看到滑块的拇指。一旦他们单击，我希望滑块拇指出现在轨道上。为了在参与者响应之前隐藏滑块，我对 jsPsych CSS 文件进行了更改。

.jspsych-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  visibility: hidden;
}
.jspsych-slider::-ms-thumb {visibility: hidden;}
.jspsych-slider::-moz-range-thumb {visibility:hidden;}

这很好用，因为在试用开始时滑块拇指是隐藏的。为了让参与者单击滑块后显示滑块，我使用 on_load 函数对试验的 HTML 代码进行了更改。

var slider_eg = {
    type: 'canvas-slider-response',
    stimulus: twoSquares,
    labels: ['0','10'],
    require_movement: true,
    prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>',
    on_load: function(){
      document.querySelector('#jspsych-canvas-slider-response-response').addEventListener('click', function(e){
        e.target.style.visibility = "show"})
    },
};

参与者的响应在单击时被记录，但拇指未出现在轨道上。我不确定如何解决这个问题，因为当我使用 on_load 函数并将可见性设置为“隐藏”时，它会在滑块轨道消失时起作用。所以我不确定如何使反向工作。

任何帮助表示赞赏。谢谢你，普拉尚蒂

标签： javascripthtmljquerycssjspsych