Перемещение класса/стиля на основе значения диапазона ввода

Интересно, как я могу выделить только абзац, который в любой момент соответствует значению, полученному от ввода с типом диапазона.Перемещение класса/стиля на основе значения диапазона ввода

Когда я перемещаю ползунок, я хочу добавить класс к абзацу, который соответствует входному значению в этот заданный момент времени. Я добился установки класса (я просто использовал встроенный стиль для тестирования), но как я могу в то же время удалить класс из всех других абзацев, которые не соответствуют значению?

Это то, что я получил в настоящее время:

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

источник

2016-03-05 aprestmo

На следующем примере, когда входной диапазон движения, все <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>

источник

2016-03-05 18:38:28

Это также решает, что я искал :) – aprestmo

** add class: ** 'document.getElementById (" id "). className + =" classn ame "; ** substitute class: **' document.getElementById ("id"). className = "classname"; '** removeeclass (jQuery): **' $ ("element"). removeClass ("class"); ' –

Альтернативное решение только с помощью 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>

источник

2016-03-05 18:46:23 gaetanoM

Это именно то, что я искал :) – aprestmo

Перемещение класса/стиля на основе значения диапазона ввода

ответ

Смежные вопросы