javascript - 如何跳到范围滑块中的下一个值,步骤只允许数字
问题描述
我正在创建一个范围滑块,以根据用户在滑块上选择的范围显示具有容量和显示/隐藏画廊的不同场地。
我的容量是 [ 50, 100, 200, 300, 500 ]
Q1 我希望我的范围滑块自动转到下一个值而不是通常的步骤(当前设置为 50)
Q2 我的滑块是否可以包含字符串而不是数字,就像我想展示的那样,[Small, Medium, Large] 场地。
我是新手,所以请让我知道是否有办法做到这一点,这也是代码,如果有更简单的方法,请告诉我。
非常感谢您的时间和帮助
这是代码
https://jsfiddle.net/6v5dsfz3/1/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1A77B9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Slide for Required Capacity for Grounds</h2>
<div class="slidecontainer">
<!-- input will go here -->
<p>Venue Capacity: <span id="demo"></span></p>
</div>
<div class='venue' data-capacity=60>
Venue C has capacity of 60
</div>
<div class='venue' data-capacity=70>
Venue Q has capacity of 70
</div>
<div class='venue' data-capacity=400>
temp 4
</div>
<script>
var smallCap = [50, 100, 200, 300, 500];
var Capacity;
var inputTemplate = '<input id="myRange" class="slider" type="range" min={min} max={max} value={value} step="1">'
inputTemplate = inputTemplate.replace("{min}",smallCap[0]).replace("{max}",smallCap[smallCap.length-1]).replace("{value}",smallCap[0]);
$('.slidecontainer').prepend(inputTemplate);
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
myfunction(this.value);
}
function myfunction(value) {
output.innerHTML = value;
document.querySelectorAll('.venue').forEach(item => { item.style.display = 'none'; })
var element = document.querySelector('.venue[data-capacity="' + value + '"]');
if (element) {
element.style.display = 'block';
}
}
myfunction(smallCap[0]);
</script>
</body>
</html>
解决方案
推荐阅读
- c# - 在导航时重新创建 Blazor 单例对象
- php - 您可以将送货地址传递给 Stripe Checkout
- ios - 在 xcode 12 中添加 SVProgressHUD 框架后应用程序崩溃
- javascript - 使用 mobx 转发 ref
- css - dateclass()的angulare材料日期选择器问题
- javascript - 获取 graphql 列表时出错
- javascript - 内部函数或调用函数是否应该包装在 try-catch 块中以进行正确的错误处理?
- php - 以 .jp 结尾的 Wordpress GET 请求
- python - 如何使用正则表达式删除在 Python 中每行添加单词的重复行
- react-native - 错误:“开发服务器返回响应错误代码:500”在运行反应本机应用程序时显示