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

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

您必须使用双等号 (==) 运算符来比较这些值。单个等号用于将值分配给左侧。&nbsp; if (this.value == 0) {&nbsp; &nbsp; output.innerHTML = '';&nbsp; } else if (this.value == 1) {&nbsp; &nbsp; output.innerHTML = '200k-400k';&nbsp; } else if (this.value == 2) {&nbsp; &nbsp; output.innerHTML = '400k-600k';&nbsp; } else if (this.value == 3) {&nbsp; &nbsp; output.innerHTML = '600k-800k';&nbsp; } else if (this.value == 4) {&nbsp; &nbsp; output.innerHTML = '800k-1m';&nbsp; } else if (this.value == 5) {&nbsp; &nbsp; output.innerHTML = '1m-2m';&nbsp; } else if (this.value == 6) {&nbsp; &nbsp; output.innerHTML = '2m+';&nbsp; }}完整代码：var slider = document.getElementById("myRange");var output = document.getElementById("value");slider.oninput = function() {&nbsp; if (this.value == 0) {&nbsp; &nbsp; output.innerHTML = '';&nbsp; } else if (this.value == 1) {&nbsp; &nbsp; output.innerHTML = '200k-400k';&nbsp; } else if (this.value == 2) {&nbsp; &nbsp; output.innerHTML = '400k-600k';&nbsp; } else if (this.value == 3) {&nbsp; &nbsp; output.innerHTML = '600k-800k';&nbsp; } else if (this.value == 4) {&nbsp; &nbsp; output.innerHTML = '800k-1m';&nbsp; } else if (this.value == 5) {&nbsp; &nbsp; output.innerHTML = '1m-2m';&nbsp; } else if (this.value == 6) {&nbsp; &nbsp; output.innerHTML = '2m+';&nbsp; }}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() {&nbsp; x = slider.value;&nbsp; color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';&nbsp; slider.style.background = color;});.main {&nbsp; width: 1000px;&nbsp; background-color: #888;&nbsp; margin: 0 auto;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; flex-direction: column;&nbsp; border-radius: 10px;&nbsp; border: 5px solid rgb(117, 252, 117);}h1 {&nbsp; align-self: center;&nbsp; font-size: 2em;&nbsp; font-weight: 900;}p {&nbsp; opacity: 0.7;&nbsp; font-size: 2em;&nbsp; font-weight: 900;}p span {&nbsp; color: rgb(117, 252, 117);}.slideContainer {&nbsp; width: 75%;&nbsp; align-self: center;}.slider {&nbsp; -webkit-appearance: none;&nbsp; width: 100%;&nbsp; height: 5px;&nbsp; margin-bottom: 50px;&nbsp; background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);&nbsp; outline: none;&nbsp; opacity: 0.7;&nbsp; -webkit-transition: .2s;&nbsp; transition: opacity .2s;&nbsp; border-radius: 12px;&nbsp; box-shadow: 0px 1px 10px 1px black;}.slider:hover {&nbsp; opacity: 1;}.slider::-webkit-slider-thumb {&nbsp; -webkit-appearance: none;&nbsp; appearance: none;&nbsp; width: 30px;&nbsp; height: 30px;&nbsp; background: white;&nbsp; cursor: pointer;&nbsp; border-radius: 50%;}.slider::-moz-range-thumb {&nbsp; width: 35px;&nbsp; height: 35px;&nbsp; background: white;&nbsp; cursor: pointer;&nbsp; border-radius: 50%;}<div class="main">&nbsp; <h1>Worth?</h1>&nbsp; <div class="slideContainer">&nbsp; &nbsp; <p>Value: <span id="value"></span></p>&nbsp; &nbsp; <input type="range" min="0" max="6" value="0" class="slider" id="myRange">&nbsp; </div></div>