java - 当用户摆弄 html 范围 slider 时如何更改内容(文本)？

Question

我对 JS 完全陌生。一旦用户滑动 html slider ，我想更改文章中的内容。我该如何进行？

我想做这样的事情https://imgur.com/p6YfgDT .

  <div class="slider-wrapper">
        <div class="scan">
            <h3>SCAN</h3>
        </div>
        <div class="sliderr">
            <input type="range" min="0" max="2" value="1" class="slider" id="slide">
        </div>
        <div class="read">
            <h3>READ</h3>
        </div>
    </div>

如果 slider 的值为0，显示的内容会少，如果 slider 的值为2，则显示的内容量会增加

Answer 1

您可以使用 onchange 事件来检测用户何时移动 slider 。

<input type="range" min="0" max="2" value="1" class="slider" id="slide" onchange="changeContent()">

然后使用javascript和css修改文章。您可以为使用 javascript 切换的文章容器定义类，从而影响容器的子容器:

.slide2 {
    display: none;
}

div.showdetail .slide2 {
    display: block;
}

div.hidedetail .slide0 {
   display: none;
}

    <div class="">
        <p> Always shown <p/>
        <p class="slide0"> Removable detail <p/>
        <p class="slide2"> Hidden till needed <p/>
        <p class="slide0"> Removable detail <p/>
        <p class="slide2"> Hidden till needed <p/>
    </div>

然后使用 javascript 添加或删除基于 slider 的类。