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