基於輸入範圍值移動類/樣式

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

在下面的例子中，當輸入範圍移動，所有<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>