Dynamiclly通過點擊事件

Question

追加與增量numereic值不同類我有一個跨度標籤和按鈕標籤

<span class="myspan">1</span> 
<button id="add">Add +1</button> 
var arr=["myspan1","myspan2","myspan3","myspan4"} 

我想通過點擊按鈕添加新的類更span標籤從這個數組增量值。 像這樣的輸出：

<span class="myspan1">1</span> 
<span class="myspan2">2</span> 
<span class="myspan3">3</span> 
<span class="myspan4">4</span> 

我嘗試' this JsFiddle

但我不能對新追加的標籤從數組中添加類名。

另一個有用的鏈接，從陣列 http://jsbin.com/nojipowo/2/edit?html,css,js,output ... 新類附加標籤，但我不能在任何情況下，把我的願望輸出...在這裏輸入的代碼

值increaseesenter這裏這個代碼片斷

<script> var i = 0; function buttonClick() {i++;  document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>

另一種嘗試......任何人都可以幫助..讓慾望OU tput的

var i=6; 
 
var backgrounds = ["myspan1", "myspan2", "myspan4"]; 
 
var elements = document.getElementsByClassName("myspan");var len = backgrounds.length; 
 

 
$("#add").click(function() { 
 
(i < elements.length){ 
 

 

 
    $(".new-field").append('<span class="myspan">1</span><script'); 
 
    var value = parseInt($(".myspan").text(), 10) + 1; 
 
    elements[i].className += ' ' + backgrounds[i%len]; 
 
    i++; 
 
    $(".background").text(i);  
 
    } 
 
});

*/

<span class="myspan">1</span> 
 

 
<button id="add">Add +1</button> 
 
<div class="new-field"> 
 
    
 
</div>

Answer 1

<script> var i = 0; function buttonClick() {i++;  document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>

Answer 2

嘗試此經由parseInt($(".myspan").length)檢查跨度長度。而與Array#forEach用於迭代陣列代替增量i的。使用parseInt轉換的部份字符串編號

var i=6; 
 
var backgrounds = ["myspan1", "myspan2", "myspan4"]; 
 

 
var len = backgrounds.length; 
 

 
$("#add").click(function() { 
 
var len = parseInt($(".myspan").length) 
 
backgrounds.forEach(function(a){ 
 
    $(".new-field").append('<span class="'+a+'">'+(len++)+'</span>'); 
 
    }) 
 
    console.log($(".new-field").html()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="myspan">1</span> 
 

 
<button id="add">Add +1</button> 
 
<div class="new-field"> 
 
    
 
</div>

Answer 3

檢查fiddle。希望這可以幫助！

HTML：

​​

JS：

var arr = ["myspan1", "myspan2", "myspan3", "myspan4"]; 

$("#add").on("click", function() { 
var spans = $("span"); 
var classList = []; 
$.each(spans, function() { 
    var elemCls = $(this).attr('class').length > 1 ? $(this).attr('class').split(' ') : $(this).attr('class'); 
    if (elemCls) { 

     $.each(elemCls, function() { 

      classList.push(this.toString()); 
     }); 
    } 
}); 
$.each(arr, function(i, e) { 

    if ($.inArray(e, classList) == -1) { 

     $("#mainContainer").append("<span class='" + e + "'>" + parseInt(spans.length + 1) + "</span>"); 
     return false; 
    } 
}); 
});