如何根据范围滑块中选择的值创建具有多个输入的动态 <div>？

Question

我正在尝试创建每个 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？

Answer 1

您可以通过选择要显示/隐藏的所有<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>

注意我在<div> 中添加了一个类show-hide

然后我们可以这样选择它们：

$('#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();
            }
        });
    }
});