检测何时使用不同的 html 范围滑块并显示图像，而无需在每个步骤或焦点上重新加载图像

问题描述

假设我有 2 个基本的范围滑块 -

<input type="range" id="one">

<input type="range" id="two">

我想在使用第一个滑块时显示图像 #1，在使用滑块 2 时显示图像 #2。

我在页面加载时显示了这个默认图像，当在javascript中使用滑块时我会切换图像。

<img src="image.jpg" class="image" style="display:none;"/>

JS -

var sliderOne = document.getElementById("one");
sliderOne.oninput = function() {
    $('.image').fadeOut(200);
    $('.image').replaceWith('<img src="one.jpg" class="image" style="display:none;"/>');
    $('.image').fadeIn(200);
}

var sliderTwo = document.getElementById("two");
sliderTwo.oninput = function() {
    $('.image').fadeOut(200);
    $('.image').replaceWith('<img src="two.jpg" class="image" style="display:none;"/>');
    $('.image').fadeIn(200);
}

此时一切正常，第一个图像淡出，第二个图像淡入。但是如果您还看不到它，问题就出现了。图像随着滑块的每一步重新加载，或者如果用户聚焦并返回到同一个滑块。我只希望在使用新滑块后加载图像。如何检测何时使用不同的滑块，以便确保仅在滑块之间的初始切换时加载图片？

• 注意：我为这篇文章编写了这个示例，而不是我的实际脚本 寻找实现此目的的逻辑不一定只是代码。

解决方法

我想通了，使用带焦点的 addEventListener 解决了这个问题。

sliderOne.addEventListener('focus',function() {});