javascript - 根据输入范围值移动类别/样式

Question

我想知道如何才能仅突出显示在任何时刻与从具有范围类型的输入中检索到的值相对应的段落。

当我移动 slider 时，我想向与给定时间的输入值相对应的段落添加一个类。我已经实现了类的设置(我只是使用内联样式进行测试)，但是我如何同时从与该值不对应的所有其他段落中删除该类？

这就是我现在得到的:

<input id="part" type="range" min="1" max="6" value="6" step="1">

<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>

JS/jQuery:

var p = document.getElementById('part');

p.addEventListener('input', function () {
    $('p.update-' + p.value).css('color', 'red');
}, false )

Answer 1

在下面的示例中，当范围输入移动时，所有 <p>元素更改为 .transparent类，然后选定的类会收到新的 .selected类。

function highlight(){

var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "transparent";
}
  
var sell = document.getElementById("parag").value;  
document.getElementById("a" + sell).className = "selected";
  
}

body {
background: #f7f7f7;
}

.selected {
color: #000000;
background: rgba(215, 255, 0, 0.8);
}

.transparent {
color: #666666;
background: transparent;  
}

<input id=parag type="range" name="range" min="1" max="6" step="1" oninput="highlight()">

<p id=a1 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p id=a2 class="transparent">Lorem ipsum dolor sit amet.</p>
<p id=a3 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p id=a4 class="transparent">Lorem ipsum dolor.</p>
<p id=a5 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p id=a6 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>