javascript:同时调用相同的函数？

Question

我正在开发这段 javascript 代码，它只在单击按钮时运行一次函数。

JAVASCRIPT:

var a = 1;

function add(name) 
{
if (a <= 9) 
    {
        a++;
        var parent = name.parentNode;
        var content = parent.querySelector("div");
        var str = content.innerHTML;
        str = str.replace(/_1/gi, '_' + a);
        var divtest = document.createElement("div");
        divtest.setAttribute("id", a);
        divtest.innerHTML = str + a;
        parent.appendChild(divtest);
    }
}   

HTML:

<div id="main1">
<button onclick="add(this);return false;">+</button>
<div id="content1">
A
</div>
</div>

<div id="main2">
<button onclick="add(this);return false;">+</button>
<div id="content2">
B
</div>
</div>

上面的代码只调用了一次函数，但我希望它同时运行函数。

OUTPUT:

+
A
A 2
A 3
A 4
A 5
A 6
A 7
A 8
A 9
A 10
+
B

当我点击两个 div 上的按钮时，每次点击都应该在主 div 上添加这两个按钮。

EXPECTED OUTPUT:

+
A
A 2
A 3
A 4
A 5
A 6
A 7
A 8
A 9
A 10
+
B
B 2
B 3
B 4
B 5
B 6
B 7
B 8
B 9
B 10

Answer 1

假设代码可以正常工作，这很简单:

function add(me) 
{
    var buttons = document.querySelectorAll('button.add');
    var btn;
    for(var b = 0; b < buttons.length; b++)
    {
        btn = buttons[b];
        if(me === btn) {
            btn.a = btn.a || 1;
            btn.a++;
            addForButton(btn);
        }
    }
}

function rem(me) 
{
    var buttons = document.querySelectorAll('button.remove');
    var btn;
    for(var b = 0; b < buttons.length; b++)
    {
        btn = buttons[b];
        if(me === btn) {
            var divs = me.parentNode.querySelectorAll('div > div');
            if(divs.length > 1){
                divs[divs.length - 1].parentNode.removeChild(divs[divs.length - 1]);
                btn.a--;
            }
        }
    }
}

function addForButton(name) {
    var parent = name.parentNode;
    var content = parent.querySelector("div");
    if (name.a <= 9) 
    {
        var str = content.innerHTML;
        str = str.replace(/_1/gi, '_' + name.a);
        var divtest = document.createElement("div");
        divtest.setAttribute("id", name.a);
        divtest.innerHTML = str;
        parent.appendChild(divtest);
    }
}

然后给按钮添加ID:

<button onclick="add();return false;">+</button>

<button onclick="add();return false;">+</button>