javascript - 如何创建动态s 基于范围滑块中选择的值具有多个输入?
问题描述
我正在尝试在每个 div 上创建具有 3 个单元格的动态 div。上面是一个范围滑块,两端各有 2 个输入。该范围由 36-50 之间的值组成,并且在 36、38、40.. 等范围之间的每个偶数值都有 8 个 div。如果选择的范围在 36-40 之间,则只能显示 3 个 div,如果选择在 36-48 之间,则必须显示 7 个 div。并且所选范围的值需要显示在第一个只读输入单元格中。
这就是现在的样子
范围滑块
<h5><span class="badge badge-light">Select Size Range:</span></h5>
<form>
<div class="row">
<div class="col"><input type="text" class="value form-control" data-
index="36" value="36" /></div>
<div class="col-10" id="slider"></div>
<div class="col"><input type="text" class="value form-control" data-
index="50" value="50" /></div>
</div></form>
滑块的脚本
<script>
$(document).ready(function() {
$('#slider').slider({
min: 36,
max:50,
step: 1,
values: [36, 50],
range: true,
slide: function(event, ui) {
$.each(ui.values, function(i, v) {
$('input.value').eq(i).val(v);
});
}
});
$('input.value').change(function() {
var $this = $(this);
$('#slider').slider('values', $this.attr('data-index'), $this.val());
});
});
滑块的 CSS
<style>
#slider {
margin-bottom: 20px;
color: black;}
#slider div.ui-slider-range {
background: transparent;}
input[data-index="1"] {float: right;}</style>
在此输入中输入的值反映在所有其他单元格中
<div class="row">
<div class="col-sm">
<h5><span class="badge badge-dark">Add Quantity:</span></h5>
<input class="form-control" type="text" name="n1" id="n1" onkeyup="sync()">
</div></div>
在所有单元格中反映数据的脚本
function sync()
{
var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
var n3 = document.getElementById('n3');
var n4 = document.getElementById('n4');
var n5 = document.getElementById('n5');
var n6 = document.getElementById('n6');
var n7 = document.getElementById('n7');
var n8 = document.getElementById('n8');
var n9 = document.getElementById('n9');
n9.value = n8.value = n7.value = n6.value = n5.value = n4.value = n3.value
= n2.value = n1.value;}
具有 3 个需要动态生成的单元格的 div,最多 8 个可能的 div。range(36,38...) 中的值将显示在只读单元格中。
<form action="add.php" method="GET">
<div class="row">
<div class="col-sm">
<input type="text" value="36" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n2" id="n2"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="38" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n3" id="n3"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="40" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n4" id="n4"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="42" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n5" id="n5"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="44" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n6" id="n6"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="46" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n7" id="n7"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="48" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n8" id="n8"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
<div class="col-sm">
<input type="text" value="50" readonly style="background-color: #F5F5F5;"
class="form-control"><br>
<input class="form-control" type="text" name="n9" id="n9"/><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
</div>
如何根据在范围滑块中输入的值循环 div?
解决方案
<div>
您可以通过选择所有要显示/隐藏的内容来解决此问题。然后检查每个 的<input>
readOnly 值以查看该值是否位于滑块值之间。并使用 jQuery 相应地显示/隐藏它们。
要选择所有<div>
感兴趣的内容,请先向它们添加一个类。
<div class="col-sm show-hide">
<input type="text" value="36" readonly style="background-color: #F5F5F5;" class="form-control"><br>
<input class="form-control" type="text" name="n2" id="n2" /><br>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select>
</div>
注意我添加了一个show-hide
类<div>
然后我们可以像这样选择它们:
$('#slider').slider({
min: 36,
max: 50,
step: 1,
values: [36, 50],
range: true,
slide: function (event, ui) {
// select the divs
$('.show-hide').each(function (idx, div) {
var $div = $(div);
// get the readonly value of the input inside the div
var value = $div.children().first().val();
// check whether the value lies between the values specified by the slider
if (value < ui.values[0] || value > ui.values[1]) {
$div.hide();
} else {
$div.show();
}
});
}
});
推荐阅读
- java - Java 序列化对象为空
- c# - 编译的绑定 (x:Bind) 是否需要 ViewModel 从 DependencyObject 派生?
- r - 在 R 中的聚类分析中过滤变量
- python-3.x - Imageio 无法以正确的帧速率读取网络摄像头
- apache-nifi - NiFi中触发了FetchFolder?
- r - r - calculate using next non-na value in data frame column
- php - 如何从数组中删除特定值的多个实例
- jquery - 当我在 MVC 应用程序中请求 ajax 数据时,为什么我的模态部分视图为空?
- dart - 如何向 TabBar 添加缺口以在其中放置 FloatingActionButton
- java - 从 Hibernate 捕获生成的 SQL