嗨,我正在尝试解决JavaScript中的问题,不幸的是,我在这里遇到的问题上有些卡住了。
我正在设计一个滑块,其中滑块的拇指更改为当前范围为1-5的其他范围。问题是,当滑块更改时,我似乎无法使表情符号按原样出现。
这是我正在使用的:
var slider = document.getElementById('myRange')
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/18-slightly-smiling-face.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/06-grinning-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/12-smiling-face-with-sunglasses.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<div class="slider-bar">
<input type="range" id="myRange" min="1" max="5" value="1" />
</div>
此功能是怎么回事?:
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
最后一个else if
永远不会执行。
编辑:如果x
是与您要匹配的类相同数字的整数,则可以简单地将上面的所有代码替换为
slider.className = `MyClass-${x}`;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句