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

Question

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

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

这就是我现在得到的：

<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

在下面的示例中，当range输入移动时，所有<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>

​

Answer 2

一种仅使用javascript并减少操作数量的替代解决方案是：

​

// save the previous selected paragraph
var oldSelectedParagraph = null;

window.onload= function(e) {
  document.getElementById('part').addEventListener('change', function () {
    // if the previous selected paragraph exists remove the attribute
    if (oldSelectedParagraph != null) {
      oldSelectedParagraph[0].style.color = '';
    }
    //save current selected paragraph if valid and set the attribute
    oldSelectedParagraph = document.querySelectorAll('p.update-' + this.value);
    if (oldSelectedParagraph.length == 1) {
      oldSelectedParagraph[0].style.color = 'red';
    } else {
      oldSelectedParagraph = null;
    }
  }, false )
}

<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, imped</p>

​