0

我一直在试图弄清楚我整天都遇到的这个问题。我将为您简要介绍我一直在尝试做的事情。用户输入一个数字，无论这个数字是多少，都是下一页上的类别数。在每个类别中，都有一个输入文本按钮，以及一个动态添加其他输入文本框的“添加文本框”按钮。但是，这里的问题是每个类别在同一页面上都有相同的设置。例如，如果用户输入数字“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”属性来执行此操作。显然，我无法访问此函数对象，也无法调用任何单个函数。我想我需要重新考虑这一切并重新开始。我只是想不出另一种方法来让它发挥作用。请与我分享你的想法！您的帮助将不胜感激。

4

1 回答 1

1

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

var cat1 = new Category(document.body);

幸运的是，我还写了一个作为示例。在此处查看演示。不过，我根本没有为新线等设计样式。

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;
}());
于 2013-07-03T01:54:42.180 回答