自定义输入范围滑块在输入后卡住

Question

我正在尝试使用可以指示价格范围的输入类型 = 范围滑块。我也想这样做，这样我就可以在每个选项上打勾，但我想这是另一个问题。到目前为止，我已经能够创建并稍微设置滑块以及 CSS 和 JS 的样式，以使其自动更新以填充其背后的背景并输出。但是，现在在根据 if 语句更改输出后，它会完全按照我想要的方式更新！一次......然后它中断并且不允许任何更新。（我确定问题出在我的 if 语句函数 oninput 中）我究竟做错了什么？var slider = document.getElementById("myRange");var output = document.getElementById("value");output.innerHTML = '200k-';slider.oninput = function() {  if (this.value = 0) {    output.innerHTML = '200k-';  } else if (this.value = 1) {    output.innerHTML = '200k-400k';  } else if (this.value = 2) {    output.innerHTML = '400k-600k';  } else if (this.value = 3) {    output.innerHTML = '600k-800k';  } else if (this.value = 4) {    output.innerHTML = '800k-1m';  } else if (this.value = 5) {    output.innerHTML = '1m-2m';  } else if (this.value = 6) {    output.innerHTML = '2m+';  }}var start_value = slider.getAttribute("value");var x = start_value;var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';slider.style.background = color;slider.addEventListener("mousemove", function() {  x = slider.value;  color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';  slider.style.background = color;});.main {  width: 1000px;  background-color: #888;  margin: 0 auto;  display: flex;  justify-content: center;  flex-direction: column;  border-radius: 10px;  border: 5px solid rgb(117, 252, 117);}h1 {  align-self: center;  font-size: 2em;  font-weight: 900;}p {  opacity: 0.7;  font-size: 2em;  font-weight: 900;}p span {  color: rgb(117, 252, 117);}.slideContainer {  width: 75%;  align-self: center;}.slider {  -webkit-appearance: none;  width: 100%;  height: 5px;  margin-bottom: 50px;  background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;  border-radius: 12px;  box-shadow: 0px 1px 10px 1px black;}.slider:hover {  opacity: 1;}

Answer 1

您必须使用双等号 (==) 运算符来比较这些值。单个等号用于将值分配给左侧。

  if (this.value == 0) {

    output.innerHTML = '';

  } else if (this.value == 1) {

    output.innerHTML = '200k-400k';

  } else if (this.value == 2) {

    output.innerHTML = '400k-600k';

  } else if (this.value == 3) {

    output.innerHTML = '600k-800k';

  } else if (this.value == 4) {

    output.innerHTML = '800k-1m';

  } else if (this.value == 5) {

    output.innerHTML = '1m-2m';

  } else if (this.value == 6) {

    output.innerHTML = '2m+';

  }

}

完整代码：

var slider = document.getElementById("myRange");

var output = document.getElementById("value");

slider.oninput = function() {

  if (this.value == 0) {

    output.innerHTML = '';

  } else if (this.value == 1) {

    output.innerHTML = '200k-400k';

  } else if (this.value == 2) {

    output.innerHTML = '400k-600k';

  } else if (this.value == 3) {

    output.innerHTML = '600k-800k';

  } else if (this.value == 4) {

    output.innerHTML = '800k-1m';

  } else if (this.value == 5) {

    output.innerHTML = '1m-2m';

  } else if (this.value == 6) {

    output.innerHTML = '2m+';

  }

}

var start_value = slider.getAttribute("value");

var x = start_value;

var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';

slider.style.background = color;

slider.addEventListener("mousemove", function() {

  x = slider.value;

  color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';

  slider.style.background = color;

});

.main {

  width: 1000px;

  background-color: #888;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  flex-direction: column;

  border-radius: 10px;

  border: 5px solid rgb(117, 252, 117);

}

h1 {

  align-self: center;

  font-size: 2em;

  font-weight: 900;

}

p {

  opacity: 0.7;

  font-size: 2em;

  font-weight: 900;

}

p span {

  color: rgb(117, 252, 117);

}

.slideContainer {

  width: 75%;

  align-self: center;

}

.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 5px;

  margin-bottom: 50px;

  background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

  border-radius: 12px;

  box-shadow: 0px 1px 10px 1px black;

}

.slider:hover {

  opacity: 1;

}

.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 30px;

  height: 30px;

  background: white;

  cursor: pointer;

  border-radius: 50%;

}

.slider::-moz-range-thumb {

  width: 35px;

  height: 35px;

  background: white;

  cursor: pointer;

  border-radius: 50%;

}

<div class="main">

  <h1>Worth?</h1>

  <div class="slideContainer">

    <p>Value: <span id="value"></span></p>

    <input type="range" min="0" max="6" value="0" class="slider" id="myRange">

  </div>

</div>