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类。

＆＃13;

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";
  
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

@Bean
public EmbeddedServletContainerFactory servletContainer() {

    TomcatEmbeddedServletContainerFactory tomcat = new TomcatEmbeddedServletContainerFactory();

    if (StringUtils.isNotBlank(documentRoot)) {
        tomcat.setDocumentRoot(new File(documentRoot));
    }

    return tomcat;
}

＆＃13;

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

＆＃13;

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

2 个答案: