使用 jQuery 的动态"add another product"表单

我正在尝试创建一个具有输入和选择的动态形式。SELECT值将来自JSON数据(目前，我只是在使用数组(，并且必须具有"添加另一个产品"的功能。

一个页面必须具有两种形式，具有相同的功能

单击"添加另一个产品"时，我会连接一排，它应该在父表上克隆，但这是NOS发生的，无法明白。

我留下一个与下面相同的代码

的代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Select</title>
</head>
<body>
<form id="myForm" action="" class="dynamic-select">
    <div class="main-clone">
        <select name="myName">
                <option value="">Hi</option>
        </select>
        <input name="myText" type="text">
    </div>
    <p class="clone-btn">Add another product</p>
    <p class="re">Re</p>
</form>
<form id="myForm2" action="" class="dynamic-select">
    <div class="main-clone">
        <select name="myName">
                <option value="">Hi</option>
        </select>
        <input name="myText" type="text">
    </div>
    <p class="clone-btn">Add another product</p>
    <p class="re">Re</p>
</form>
</body>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/script.js"></script>
</html>

jQuery form

$(document).ready(function(){
    var arr = ['Juanma', 'Pepe', 'Esteban', 'Pedro', 'Juan'];
    var arr2 = ['a', 'b', 'c', 'd', 'e'];
    dynamicSelect.init(arr,'#myForm');
    dynamicSelect.init(arr,'#myForm2');
    $('form').on('click','.delete-clone', function(){
        $(this).parent().remove();
    });
});
var dynamicSelect = {
    init: function(arr,id){
        this.cachedDom(id);
        this.bindEvents();
        this.createElement(arr);
    },
    cachedDom : function(id){
        this.$form = $(id);
        this.$select = this.$form.find('select');
        this.$mainClone = this.$form.find(".main-clone");
        this.$cloneBtn = this.$form.find('.clone-btn');
        this.$submit = this.$form.find('.re');
    },
    bindEvents : function(){
        this.$cloneBtn.on('click', this.cloneElement.bind(this));
        this.$submit.on('click', this.getValues.bind(this));
    },
    createElement: function(arr){
        var fragment = document.createDocumentFragment();
        arr.forEach(function(arr, index) {
            var opt = document.createElement('option');
            opt.innerHTML = arr;
            opt.value = arr;
            fragment.appendChild(opt);
        });
        this.$select.append(fragment);
    },
    cloneElement: function(){
        var $clone = this.$mainClone.clone();
        $clone.append('<span class="delete-clone">X</span>');
        $clone.insertAfter(this.$mainClone);
    },
    getValues: function(){
        console.log(this.$form.serialize());
    }
}

快速答案是您不是在实例化对象，因此代码中的最后一项将是继承所有属性的物体 - 这就是为什么只有第二个形式正常被正确激活为每个绑定继承正确的"此"。

您需要做的是：

var test = Object.create(dynamicSelect);
var test2 = Object.create(dynamicSelect);
test.init(arr,'#myForm');
test2.init(arr,'#myForm2');

https://codepen.io/anon/pen/emzbgy?editors=1010

这本质上使每个对象实例化时具有自己的"此"。在具有实际类的其他语言或ES6中，您会看到类似类狗{}的东西。然后，您将有：

class Dog {
 bark(){
 }
}    
const fido = new dog();
fido.bark();

这与object。

相关内容

最新更新

热门标签：