代码之家 › 专栏 › 技术社区 › Dominik S. Meier

将事件侦听器添加到范围输入滑块以显示其他元素

javascript

Dominik S. Meier · 技术社区 · 6 年前

对于一个项目,我只需要在滑动条被触摸/移动之后显示一个元素。我的javascript技能非常有限,我尝试了很多不同的东西,但都没用。

这里有一个到JS小提琴的链接(test_id是我想在触摸/移动滑块后显示的元素): https://jsfiddle.net/dominikmeier/5r1Lnsyz/#&togetherjs=5B6pFpLVQ5

<div class="form-group required">
   <label class="col-form-label" for="id_kept">Slider:</label>
   <div class="controls  field-offer">
      <div class="input-group slider" data-slider>
          <input type="range" name="kept" value="-1" step="1" min="0" max="10" required id="id_kept" class="form-control" />
          <div class="input-group-append">
             <span class="input-group-text" data-slider-value title="current value" id="front_stagger_output_s" />
          </div>
      </div>
   </div>
</div>
<div class="test" id = "test_id">
   test
</div>

对于“初学者”的问题我很抱歉,但我试了一整天却找不到答案。谢谢你的帮助!

1 回复 | 直到 6 年前

a_stud 6 年前

您可以尝试范围滑块上的“mouseup”事件:

/* On your js script */
var range_slider = document.getElementById("id_kept");

range_slider.addEventListener('mouseup', function() {
    if (this.value > 0) {
        //alert("Range Slider has value of " + this.value);
        document.getElementById("test_id").style.display = 'block';

    } else{
        //alert("Range Slider has value of " + this.value);
        document.getElementById("test_id").style.display = 'none';
    }
});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前