Question

我正在尝试根据输入到字段中的数字创建多个div（行）。如果我在文本字段中输入3，则会创建3个div，其中包含嵌套的div。

出于某种原因，这不起作用。我已将问题缩小到这一部分。我认为这与Html输入var输入的方式有关。

见这里

$(function() {

            var input = $('<div class="form_item" id="container_field">
                                    <div class="form_label"><label>&nbsp;</label></div>
                                    <div class="fi">
                                        <div class="label">Container Number</div>
                                        <div class="field"><input type="text" class="n_input"/><input type="text" class="f_input"/></div>
                                    </div>
                                    <div class="fi">
                                        <div class="label">Size</div>
                                        <div class="field">
                                            <select class="n_select">
                                                <option>20 feet</option>
                                                <option>40 feet</option>
                                                <option>Others</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="fi">
                                        <div class="label">Weight</div>
                                        <div class="field"><input type="text" class="n_input"/></div>
                                    </div>
                                  </div>');
            var newFields = $('');

            $('#qty').bind('blur keyup change', function() {
                var n = this.value || 0;
                if (n+1) {
                    if (n > newFields.length) {
                        addFields(n);
                    } else {
                        removeFields(n);
                    }
                }
            });

            function addFields(n) {
                for (i = newFields.length; i < n; i++) {
                    var newInput = input.clone();
                    newFields = newFields.add(newInput);
                    newInput.appendTo('#container_specs');
                }
            }

            function removeFields(n) {
                var removeField = newFields.slice(n).remove();
                newFields = newFields.not(removeField);
            }
        });

也有人可以推荐一个好的基于浏览器的调试器吗？有些东西会告诉我为什么这首先不起作用。

Answer 1

如果您正在尝试复制输入代码，则可能通过使多个元素具有相同ID来打破它。将container_field id更改为类。

使用JQuery将html放入var中

1 个答案: