javascript - 为什么方 block 会错误地消失？

Question

根据想法，当更改值时， slider 应显示或隐藏data-value属性大于或小于输出值的 block 。但它们会消失并且无法正确显示。当我通过警报检查 caaunter 值时，一切都显示正确。

这是一个工作示例。

var fader = document.querySelector('#fader');

let volInputHandler = function(event) {
    let mass = document.querySelectorAll('.block');
    let output = document.querySelector('#volume');
    let counter = event.target.value;
    output.innerHTML = counter;
    mass.forEach((item, i, mass) => {
         let dataValue = item.getAttribute('data-value');
         if(dataValue < counter){
             item.style.display = 'none';
         }
         else{
             item.style.display = 'block';
         }
    });

}
fader.addEventListener('input', volInputHandler);

body {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}
span{
	display: inline-block;
}
.slider {
		position: relative;
		background: #f4f4f4;
		border-radius: 8px;
		width: 300px;
    margin-top:50px;
	}
output {
	position: absolute;
	left: -20px;
	top: -40px;
	padding: 7px 10px;
	background: #76de76;
	color: #fff;
	border-radius: 10px 10px 0 10px;
	font-weight: bold;
}
#fader {
	position: relative;
	left: 3px;
	width: 200px;
	height: 10px;
	background: #76de76;
	-webkit-appearance: none;
	outline: none;
	border-radius: 4px;
}

#fader::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #76de76;
	box-shadow: 0 0 2px #222;
}

.wrapper {
	background-color: grey;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 500px;
	margin: 0 auto;
	margin-top: 20px;
}

.block{
	margin: 20px;
	width: 100px;
	height: 60px;
	background-color: orange;
}

<div class="slider">
	<span>0</span>
	<output name="fader" id="volume">0</output>
	<input id="fader" type="range" name="" value="0" step="10" min="0" max="200">
	<span>200</span>
</div>
<div class="wrapper">
	<div class="block" data-value="0">0</div>
	<div class="block" data-value="50">50</div>
	<div class="block" data-value="200">200</div>
	<div class="block" data-value="75">75</div>
	<div class="block" data-value="120">120</div>
	<div class="block" data-value="160">160</div>
</div>

Answer 1

需要转换为int

.value 和 data-value 是字符串，因此“90” > “120”

var fader = document.querySelector('#fader');

let volInputHandler = function(event) {
  let mass = document.querySelectorAll('.block');
  let output = document.querySelector('#volume');
  let counter = +event.target.value; // cast to number
  output.innerHTML = counter;
  mass.forEach((item, i, mass) => {
    let dataValue = +item.getAttribute('data-value'); // cast to number
    item.hidden = dataValue < counter
    // item.textContent = dataValue +"<"+ counter + (dataValue < counter)
  });

}
fader.addEventListener('input', volInputHandler);

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

span {
  display: inline-block;
}

.slider {
  position: relative;
  background: #f4f4f4;
  border-radius: 8px;
  width: 300px;
  margin-top: 50px;
}

output {
  position: absolute;
  left: -20px;
  top: -40px;
  padding: 7px 10px;
  background: #76de76;
  color: #fff;
  border-radius: 10px 10px 0 10px;
  font-weight: bold;
}

#fader {
  position: relative;
  left: 3px;
  width: 200px;
  height: 10px;
  background: #76de76;
  -webkit-appearance: none;
  outline: none;
  border-radius: 4px;
}

#fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #76de76;
  box-shadow: 0 0 2px #222;
}

.wrapper {
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}

.block {
  margin: 20px;
  width: 100px;
  height: 60px;
  background-color: orange;
}

<div class="slider">
  <span>0</span>
  <output name="fader" id="volume">0</output>
  <input id="fader" type="range" name="" value="0" step="10" min="0" max="200">
  <span>200</span>
</div>
<div class="wrapper">
  <div class="block" data-value="0">0</div>
  <div class="block" data-value="50">50</div>
  <div class="block" data-value="200">200</div>
  <div class="block" data-value="75">75</div>
  <div class="block" data-value="120">120</div>
  <div class="block" data-value="160">160</div>
</div>