Question

我想更改输入框的名称。在代码中我的名字从myText0开始，我希望克隆以myText1，myText2，myText3，myText4的增量进行更改...取决于添加的框的数量，以便每个输入框的命名方式不同。

Note: there will be restrictions on which applications can initiate a call; most applications should use the ACTION_DIAL.

Note: this Intent cannot be used to call emergency numbers. Applications can dial emergency numbers using ACTION_DIAL, however.

Answer 1

基本上，您有两种选择：

拥有第一个文本字段，并且对于每个新输入，您只需克隆它，获取对该克隆的引用，然后更新其name属性，并将其附加到包装器。
直接向包装器附加input元素，每次需要时创建一个新元素。

对于第二个选项，我刚修改了您的代码：

将元素附加到包装器时无需克隆元素。
您必须测试Map.values()。

-

x <= max_fields

Answer 2

我不确定你为什么要在javascript中用硬编码的html调用clone。下面的代码会将div附加到html并在新eleemnt上设置name属性

$('<div><input type="text"/><a href="#" class="remove_field">Remove</a></div>').appendTo(wrapper).children("input").prop("name", "myText" + x); //add input box

Answer 3

这是一个使用不引人注目的javascript的解决方案：

＆＃13;

function createNewInput() {
	
	var inputDiv = document.querySelector('button + div');
	var inputs = inputDiv.getElementsByTagName('input');
	var lastInput = inputs[(inputs.length - 1)];
	var lastInputX = Number(lastInput.getAttribute('name').match(/\d+$/));

	var newInput = document.createElement('input');
	var newType = document.createAttribute('type');
	newType.value = 'text';
	var newName = document.createAttribute('name');
	newName.value = 'myText' + (lastInputX + 1);

	newInput.setAttributeNode(newType);
	newInput.setAttributeNode(newName);
	inputDiv.insertBefore(newInput,lastInput);
	inputDiv.insertBefore(lastInput,newInput);
    }

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click',createNewInput,false);

＆＃13;

input {
display: block;
margin: 12px 0;
}

＆＃13;

<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="myText1" />
</div>
</div>

＆＃13;

Answer 4

您的方法几乎没有问题：

您必须确保多次添加相同的名称。如果有人添加myText1，myText2和myText3 - 然后他们删除myText2，你的逻辑将x设置为3 - 并且添加另一个字段将导致myText0，myText1，myText3和另一个myText3。

因此，我们需要确保不会多次添加相同的输入。通过使用下面看到的for循环（而不是使用x变量），您将避免此问题并确保使用最低的未使用整数。

因此，如果添加字段1,2,3,4和5，然后删除字段2，它将检测到字段2不存在，并将其用作要添加的下一个名称。显然，它们将出现故障（1,3,4,5,2） - 但是您可以避免重复和间隙，因此您可以使用其他代码轻松访问它们的值。

您的.clone行是不必要的 - 将div附加到所需元素就足够了。

如果您只想引用一次，则无需为变量分配元素。

通过在输入中添加一个类，您可以轻松查看其中已存在多少个类 - 并相应地启用/禁用“添加”按钮。

未经测试的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<?php
$num = 0;
echo '
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" class="InputField" name="'.${'myText'.$num.}.'"></div>
</div>
';
?>

<script type="text/javascript">

$(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed

        $(".add_field_button").click(function(e){ 
            e.preventDefault();
            var newId = 1;
            for (var i=0;i<max_fields;i++){
            if ($("input[name='myText" + i + "']") == null){ //If this control doesn't yet exist, set newId
                newID = i;
                break;
            }
        }

    $(".input_fields_wrap").append('<div><input type="text" class="InputField" name="myText' + newId + '"/><a href="#" class="remove_field">Remove</a></div>');

    if ($(".InputField".length >= max_fields) //Disable add field button if the max number of fields has been met
        $(".add_field_button").prop("disabled", true);
    });

    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); 
    $(this).parent('div').remove(); //Remove the associated div
    $(".add_field_button").prop("disabled", false); //Enable the add field button
    })
});
</script>

如何更改使用jquery克隆的元素名称

4 个答案: