使用JS显示HTML范围滑块的值
P粉988025835
P粉988025835 2023-09-13 00:42:58
0
1
534

用于显示HTML范围滑块值的JS对于第一个项目(A1)运行良好。然而,我也想将其用于A2项目(实际上有20个项目,所以需要重复使用19次)。是否有一种方法可以为多个迭代编写代码?

const slideValue = document.querySelector("span"); const inputSlider = document.querySelector("input"); inputSlider.oninput = (()=>{ let value = inputSlider.value; slideValue.textContent = value; slideValue.style.left = (value/.1) + "%"; slideValue.classList.add("show"); }); inputSlider.onblur = (()=>{ slideValue.classList.remove("show"); });
 
A1. Blah Blah Blah.
0
0
10
A2. Blah Blah Blah.
0
0
10

P粉988025835
P粉988025835

全部回复 (1)
P粉680000555

当然有。你会很容易地识别出你自己的代码,它被包裹在一个for循环内。

var elems = document.querySelectorAll(".range"); elems.forEach(function(elem) { const slideValue = elem.querySelector("span"); const inputSlider = elem.querySelector("input"); inputSlider.oninput = (() => { let value = inputSlider.value; slideValue.textContent = value; slideValue.style.left = (value / .1) + "%"; slideValue.classList.add("show"); }); inputSlider.onblur = (() => { slideValue.classList.remove("show"); }); })
A1. Blah Blah Blah.
0
0
10
A2. Blah Blah Blah.
0
0
10
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!