Question

我有一个span标签和一个按钮标签

<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

但是我无法将类名添加到数组中的新append标记。

用于从数组中添加新类的标记的另一个有用链接 http://jsbin.com/nojipowo/2/edit?html,css,js,output ... 但无论如何我无法提出我的愿望输出......在这里输入代码

value increaseesenter code here this snippet

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

另一种尝试......任何人都可以帮助......获得欲望输出

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

＆＃13;

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

＆＃13;

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：

<div id="mainContainer"> 
<span class="myspan">1</span>
</div>
<button id="add">Add +1</button>

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

动态地通过点击事件附加具有增量数值的不同类

3 个答案: