如何通过滑动范围滑块来改变图像？

Question

我正在复制这个网页https://www.modsy.com/project/furniture我写了代码，但是我没有得到上面网页中显示的行格式的文本

​

window.addEventListener('load', function() {
          var rangeslider = document.getElementById("sliderRange");
          var output = document.getElementById("sliderOutput");
          var images = document.getElementById("sliderImages");
          rangeslider.addEventListener('input', function() {
            for (var i = 0; i < output.children.length; i++) {
              output.children[i].style.display = 'none';
              images.children[i].style.display = 'none';
            }
            i = Number(this.value) - 1;
            output.children[i].style.display = 'block';
            images.children[i].style.display = 'block';
          });
        });

      .rangeslider {
  width: 50%;
  margin: 0 auto;
}

.myslider {
  -webkit-appearance: none;
  background: #FCF3CF;
  width: 100%;
  height: 20px;
  opacity: 0.8;
  margin-top: 180px;
}

.myslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #34495E;
  width: 33%;
  height: 20px;
}

.myslider:hover {
  opacity: 1;
}

.image {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.image>img {
  position: absolute;
  display: none;
}

.image>img.visible,
.image>img:first-child {
  display: block;
}

#sliderOutput>div {
  display: none;
}

#sliderOutput>div.visible,
#sliderOutput>div:first-child {
  display: block;
}

 <div class="image mt-3 mb-3" id="sliderImages">
  <img src="../static/images/1.jpg" width="400" height="180">
  <img src="../static/images/2.jpg" width="400" height="180">
  <img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
  <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
  <div id="sliderOutput" >
    <div class="row mt-3">
    <div class="col-4">
      <h6 class="display-6">Starting From Scratch</h6>
      <p class="demo"> I'm designing the room </p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Somewhere in Between</h6>
      <p class="demo">I'm designing around a few pieces I already own</p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Mostly Furnished</h6>
      <p class="demo">I want to put the finishing touches on my room</p>
    </div>
  </div>
  </p>
</div>    

​

通过这段代码，我得到了滑动的图像变化，但下面的范围滑块，如在网站上显示的文本不能得到你的人如何做到这一点。

​

<div class="image mt-3 mb-3" id="sliderImages">
  <img src="../static/images/1.jpg" width="400" height="180">
  <img src="../static/images/2.jpg" width="400" height="180">
  <img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
  <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
  <div id="sliderOutput" >
    <div class="row mt-3">
    <div class="col-4">
      <h6 class="display-6">Starting From Scratch</h6>
      <p class="demo"> I'm designing the room </p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Somewhere in Between</h6>
      <p class="demo">I'm designing around a few pieces I already own</p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Mostly Furnished</h6>
      <p class="demo">I want to put the finishing touches on my room</p>
    </div>
  </div>
  </p>
</div>    

<style>
        .rangeslider {
  width: 50%;
  margin: 0 auto;
}

.myslider {
  -webkit-appearance: none;
  background: #FCF3CF;
  width: 100%;
  height: 20px;
  opacity: 0.8;
  margin-top: 180px;
}

.myslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #34495E;
  width: 33%;
  height: 20px;
}

.myslider:hover {
  opacity: 1;
}

.image {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.image>img {
  position: absolute;
  display: none;
}

.image>img.visible,
.image>img:first-child {
  display: block;
}

#sliderOutput>div {
  display: none;
}

#sliderOutput>div.visible,
#sliderOutput>div:first-child {
  display: block;
}
</style>

<script> 
          window.addEventListener('load', function() {
          var rangeslider = document.getElementById("sliderRange");
          var output = document.getElementById("sliderOutput");
          var images = document.getElementById("sliderImages");
          rangeslider.addEventListener('input', function() {
            for (var i = 0; i < output.children.length; i++) {
              output.children[i].style.display = 'none';
              images.children[i].style.display = 'none';
            }
            i = Number(this.value) - 1;
            output.children[i].style.display = 'block';
            images.children[i].style.display = 'block';
          });
        });
</script>

​

Answer 1

您的问题是#sliderOutput有一个而不是3个孩子，即<div class="row mt-3">，并且文本的所有三个部分都是它的孩子，而不是#sliderOutput的孩子，所以当您更改第一个孩子的显示时，所有文本要么显示，要么消失。

您应该更改输出变量以引用<div class="row mt-3">，或者删除此div，这两种方法都会使包含文本的div直接指向输出在javascript中引用的div的子项。

我猜这就是我想要的结果

​

window.addEventListener('load', function() {
  var rangeslider = document.getElementById("sliderRange");
  var output = document.getElementById("sliderOutput");
  var images = document.getElementById("sliderImages");
  rangeslider.addEventListener('input', function() {
    for (var i = 0; i < output.children.length; i++) {
      output.children[i].style.display = 'none';
      images.children[i].style.display = 'none';
    }
    i = Number(this.value) - 1;
    output.children[i].style.display = 'block';
    images.children[i].style.display = 'block';
  });
});

.rangeslider {
  width: 50%;
  margin: 0 auto;
}

.myslider {
  -webkit-appearance: none;
  background: #FCF3CF;
  width: 100%;
  height: 20px;
  opacity: 0.8;
  margin-top: 180px;
}

.myslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #34495E;
  width: 33%;
  height: 20px;
}

.col-4 {
  text-align: center;
}

.myslider:hover {
  opacity: 1;
}

.image {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.image>img {
  position: absolute;
  display: none;
}

.image>img.visible,
.image>img:first-child {
  display: block;
}

#sliderOutput>div {
  display: none;
}

#sliderOutput>div.visible,
#sliderOutput>div:first-child {
  display: block;
}

<div class="image mt-3 mb-3" id="sliderImages">
  <img src="../static/images/1.jpg" width="400" height="180">
  <img src="../static/images/2.jpg" width="400" height="180">
  <img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
  <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
  <div id="sliderOutput">
    <div class="col-4">
      <h6 class="display-6">Starting From Scratch</h6>
      <p class="demo"> I'm designing the room </p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Somewhere in Between</h6>
      <p class="demo">I'm designing around a few pieces I already own</p>
    </div>
    <div class="col-4">
      <h6 class="display-6">Mostly Furnished</h6>
      <p class="demo">I want to put the finishing touches on my room</p>
    </div>
  </div>
  </p>
</div>

​