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

Question

我有带有输入范围的字符串

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

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

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

我知道怎么做，但没有宽度数组。 例如

 <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" />

有人可以告诉我如何输入数字重复值，并且如果用户使用添加按钮添加新字符串，也会被克隆。 我想我只用 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++;
}

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

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