Question

我一直想弄清楚我一整天都在做这个问题。我将简要介绍一下我一直试图做的事情。用户输入一个数字，无论数量多少，都是下一页的类别数量。在每个类别中，都有一个输入文本按钮，以及一个“添加文本框”按钮，可以动态添加其他输入文本框。但是，这里的问题是每个类别在同一页面上具有相同的设置。例如，如果用户输入数字“3”，则页面将垂直加载三个类别，如下所示：

Category #1
(Initial user input textbox for category #1)
("Add Textbox" button to allow user to fill out another option)

Category #2
(Initial user input textbox for category #2)
("Add Textbox" button to allow user to fill out another option)

Category #3
(Initial user input textbox for category #3)
("Add Textbox" button to allow user to fill out another option)

我遇到的困难是每个类别按钮都需要有自己的功能，告诉按钮放置文本框的位置。这与根据用户的输入改变类别的数量这一事实相结合，使事情变得困难。我从以下开始：

var categoryCount = <?php echo $categoryCount; ?>;
var click = {};

for (var num=1;num<=categoryCount;num++) {
    var newClick = "click_" + num;
    click[newClick] = function() { 
        // some contents when this button is clicked 
    };
}

这个JS创建了一个函数对象，在JS中可以通过执行以下操作来访问它们：

click['click_' + someID]();

然而，问题是我无法使用HTML / PHP按钮中的“onclick”属性执行此操作。我无法访问这个函数对象，显然不能调用任何单个函数。我想我需要重新考虑所有这些并重新开始。我想不出另一种方法让这个工作。请与我分享您的想法！非常感谢您的帮助。

Answer 1

对于这样的事情，我会编写一个我可以像这样使用的构造函数

var cat1 = new Category(document.body);

幸运的是，我还写了一个例子。请参阅DEMO HERE。不过，我还没有为新线等设置它。

var Category = (function () {
    var categoryCount = 0;
    function elem(tag) { // shortcut
        return document.createElement(tag);
    }
    function text(str) { // shortcut
        return document.createTextNode(str);
    }
    function Category(node) {
        var self = this; // this should have been var'd, oops!!
        this.categoryId = ++categoryCount;
        // make add button
        this.addButton = elem('button');
        this.addButton.appendChild(text('Add Textbox'));
        this.addButton.addEventListener('click', function () {
            self.addTextbox();
        });
        // make wrapper
        this.wrapper = elem('section');
        this.wrapper.setAttribute('id', 'cat'+this.categoryId);
        this.wrapper.appendChild(this.addButton);
        // make textboxes
        this.textboxes = [];
        this.addTextbox();
        // append to document
        if (node) {
            this.append(node);
        }
    }
    Category.prototype.addTextbox = function () {
        var e = elem('textarea');
        e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]');
        this.textboxes.push(e);
        this.wrapper.insertBefore(e, this.addButton);
    };
    Category.prototype.append = function (node) {
        return node.appendChild(this.wrapper);
    };
    return Category;
}());

只是不能让这个工作

1 个答案: