Question

这里有一些我想不通的意外错误。

点击“+”按钮始终有效，除非你' - '所有克隆的div一直离开，直到剩下一个..然后'+'按钮不再有效。
当克隆div时，应该清除复选框和单选按钮..但它没有。它会清除文本字段和选择。

一般代码帮助随时欢迎！感谢...

    <div class="cloned" id="div1">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>


    <script>

    function addDiv(){
        window.num = $('.cloned').length;
        var num = $('.cloned').length;
        var newnum = num + 1;
        var newelem = $('#div'+num).clone().attr('id','div'+newnum);
        $.each(newelem.children(), function(){
            if (this.type == 'radio'){
                $(this).attr('value',newnum+this.id).removeAttr('checked')
            }
            else if (this.type == 'button'){
                $(this).removeAttr('checked')
            }
            else if (this.type != 'button'){
                $(this).attr('name',newnum+this.id).attr('value','')
            }
        });
        $('#div'+num).after(newelem);

    };

    function removeDiv(object){
        window.num = $('.cloned').length;
        if (num != 1)
            $(object.parentNode).remove();

    };

    $('.add').live('click', function(){
        addDiv();
    });

    $('.remove').live('click', function(){
        removeDiv(this);
    });

    </script>

Answer 1

对于您的第二个问题，您重复按钮将代码更改为

else if (this.type == 'checkbox' || this.type == 'radio'){
                $(this).removeAttr('checked')
            }

删除div的问题是，当你删除第一个div并尝试克隆一个新的时，你仍然在寻找第一个div，即id为div的div为克隆而且无法找到它。这是cos的你好奇怪的数字处理..而只是持有div的隐藏副本，并使用相同的隐藏div来克隆它，你不必担心清除内容，复选框等因为它将处于默认状态。

因此你将拥有

<div style="display:none" id="masterDiv">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>

并始终克隆它。

另外一件事通常会尽可能地避免全局变量。你永远不知道最终可能会改变它...

Answer 2

实际上，您应该将模型与视图分开。您不仅不必进行任何检查，而且您正在进行这些检查意味着您的结构可以得到改善。

请参阅小提琴：http://jsfiddle.net/cnJa9/3/

javascript中的错误

2 个答案: