2015-05-08 2 views
3

Я разрабатываю этот код javascript для awhile, который он запускает только одну функцию при нажатии кнопки.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> 

Код выше только вызывает функцию один раз, но я хочу, чтобы запустить функцию в то же время ,

ВЫВОД:

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

При нажатии кнопки на обоих дивы он должен добавить как на там главных дивы за клик.

ЗАПЛАНИРОВАННЫЕ:

+ 
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 
+1

с использованием только число для 'id' является незаконным HTML. – DrCord

+0

Я удалил свой ответ, поскольку я до сих пор не уверен, что вы спрашиваете в этот момент ... – DrCord

+0

, когда я нажимаю каждую кнопку на div, которую он продолжает добавлять. попробуйте запустить мой скрипт, он не позволит мне добавить 9 разделов в каждый main1 и main2 divs –

ответ

2

Предполагая, что код работает, это достаточно просто:

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); 
    } 
} 

Затем добавить идентификаторы кнопок:

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

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

Да, это то, что я ищу. большое спасибо. есть ли способ удалить функции add() для кнопок? –

+0

Вот еще одно решение: http://jsfiddle.net/LmyxmLwm/ – SpiderPig

+0

Что вы подразумеваете под этим? Удалить 'onclick =" add (this); "'? – SpiderPig

Смежные вопросы