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

Move class/style based on input range value

本文关键字：样式 移动 输入 范围      更新时间：2023-09-26

我想知道如何在任何时候只突出显示与具有范围类型的输入中检索的值对应的段落。

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

这就是我现在得到的：

<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 )

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

仅使用 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>

相关文章：