Question

我有输入范围的字符串

 <input form="send" type="range" min="40" max="300" name="width[]" value="40">

表示一部分的宽度。如果用户需要某些部件，则单击添加按钮并获取具有新输入范围的新字符串。所以我得到了具有不同值（部件大小）的数组。

现在我需要添加重复范围值的输入数字/文本，反之亦然。用户可以键入数字，也可以更改范围输入。或者他改变输入范围和输入数也得到这个值。

我知道如何做但没有宽度数组。 E.g。

 <input type="range" name="width" min="40" max="200" value="40"
 oninput="this.form.widthPlus.value=this.value" /> <input
 type="number" name="widthPlus" min="40" max="200" value="40"
 oninput="this.form.width.value=this.value" />

如果用户使用添加按钮添加新字符串，有人可以告诉我如何输入数字reapeat值并克隆。我想我只能用JS / jQuery来做。

Answer 1

最简单的方法是每次都使用新的value属性。没有width[]（不起作用），而是width0，width1，width2，..

在代码的某处，你有一个创建新输入元素的函数：

var counter = 0;
function addElement() {
    var html = '<input type="range"  name="width' +     counter + '" min="40" max="200" value="40" oninput="this.form.widthPlus' + counter + '.value=this.value" />' +
               '<input type="number" name="widthPlus' + counter + '" min="40" max="200" value="40" oninput="this.form.width'     + counter + '.value=this.value" />'; 
    $(".outerContainer").append(html);
    counter++;
}

每次用户点击按钮时，您都可以调用此函数添加新元素。

还有一些替代方法不需要name-attribute向上计数。如果用户输入内容，您可以调用JS函数，然后使用jQuery来确定编辑了哪个元素（第n个孩子）。但这有点复杂，需要更多代码。

Answer 2

此代码没问题。我纠正了一点

    var counter = 0;
    $(document).ready(function(){
        var html = $("<input type='range'  name='width' + counter + '' min='40' max='200' value='40' oninput='this.form.widthPlus' + counter + '.value=this.value' />" + 
"<input type='number' name='widthPlus' + counter + '' min='40' max='200' value='40' oninput='this.form.width' + counter + '.value=this.value' />");
        $(".form-col-2").append(html);
        counter++;
    });

将输入数字/文本添加到范围

2 个答案: