Question

我试图在同一页面的两个地方实现扩展表单功能。第一个地方工作正常，但第二个地方甚至没有明显地调用这个功能。

第一名的html和js：

<span id="readroot" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<div class="row">
    <!-- Content not displayed for simplicity purpose -->
</div>
</span>
<span id="writeroot"></span>        
<input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" />
<script>
    var counter = 1;
    function moreFields() {
        counter++;
        var newField = document.getElementById('readroot').cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
            for (var i=0;i<newFields.length;i++) {
                var theNames = newFields[i].name
                if (theNames)
                    newFields[i].name = "data[Student][" + counter + "][" + theNames + "]";
                var theNames2 = newFields[i].id;
                if (theNames2)
                    newFields[i].id = theNames2 + counter;
                var theNames3 = newFields[i].htmlFor;
                if (theNames3)
                    newFields[i].htmlFor = theNames3 + counter;
                    //console.log(newFields[i].htmlFor);    
            }           
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newField,insertHere);
}
</script>

第二个：

<span id="readroot2" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<div class="row">
    <!-- Content not displayed for simplicity purpose -->
</div>  
</span>
<span id="writeroot2"></span>       
<input class="btn btn-default" type="button" onChange="moreFields2()" value="Give me more fields!" />
<script>
    var counter = 1;
    function moreFields2() {
        counter++;
        var newField = document.getElementById('readroot2').cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
            for (var i=0;i<newFields.length;i++) {
                var theNames = newFields[i].name
                if (theNames)
                    newFields[i].name = "data[Condition][" + counter + "][" + theNames + "]";
                var theNames2 = newFields[i].id;
                if (theNames2)
                    newFields[i].id = theNames2 + counter;
                var theNames3 = newFields[i].htmlFor;
                if (theNames3)
                    newFields[i].htmlFor = theNames3 + counter;
            }           
        var insertHere = document.getElementById('writeroot2');
        insertHere.parentNode.insertBefore(newField,insertHere);
    }
</script>

我尝试过以不同方式命名第二个函数中的所有变量。但这似乎无关紧要..

Answer 1

首先，您在两个输入

上使用了两个不同的事件

<input class="btn btn-default" type="button" onclick="moreFields()"

<input class="btn btn-default" type="button" onChange="moreFields2()"

因此，请确保您在两者上寻找相同的功能而不是......

onChange将在元素更改后触发，而不是在您键入here时检查代码，因此请清楚您想要的内容。因为onChange会在这种情况下触发模糊

Answer 2

第二个功能未在 onChange 事件上触发。如果您尝试相应地设计函数，则可能需要减少编写太多java脚本的工作量。

Answer 3

<span id="readroot" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<div class="row">
    <!-- Content not displayed for simplicity purpose -->
</div>
</span>
    <span id="writeroot"></span>
    <input class="btn btn-default" type="button" onclick="moreFields('readroot','writeroot')" value="Give me more fields!" />

    <span id="readroot2" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<div class="row">
    <!-- Content not displayed for simplicity purpose -->
</div>  
</span>
    <span id="writeroot2"></span>
    <input class="btn btn-default" type="button" onClick="moreFields('readroot2','writeroot2')" value="Give me more fields!" />


<script>
    var counter = 1;

    function moreFields(node, insertNode) {

        counter++;
        var newField = document.getElementById(node).cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
        for (var i = 0; i < newFields.length; i++) {
            var theNames = newFields[i].name
            if (theNames)
                newFields[i].name = "data[Condition][" + counter + "][" + theNames + "]";
            var theNames2 = newFields[i].id;
            if (theNames2)
                newFields[i].id = theNames2 + counter;
            var theNames3 = newFields[i].htmlFor;
            if (theNames3)
                newFields[i].htmlFor = theNames3 + counter;
        }
        var insertHere = document.getElementById(insertNode);
        insertHere.parentNode.insertBefore(newField, insertHere);


    }
</script>

请计数器再次检查它的功能。你可以请优化代码。

无法在同一页

3 个答案: