Question

我正在尝试创建动态div，每个div上包含3个单元格。在此上方的是范围滑块，其两端各有2个输入。该范围由36-50之间的值组成，并且介于36、38、40 ..等范围之间的每个偶数值都有8 div。如果选择的范围在36-40之间，则只能显示3格，如果在36-48之间选择，则必须显示7格。并且所选范围的值需要显示在第一个只读输入单元格中。

这是现在的样子

范围滑块

<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;}

div包含3个需要动态生成的单元格，最多可能有8个div。范围（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>

注意，我向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();
            }
        });
    }
});

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

1 个答案: