如何使用JavaScript將數字添加到不同的跨度？

Question

我有一個計算元素數量的變量：

var n = 0;

現在，如果我做

n++;

我想將此數字應用於不同的數字：

<span class="n">-</span>
<span class="n">-</span>
<span class="n">-</span>
<span class="n">-</span>

如果我的數字是10，我想：

<span class="n">-</span>
<span class="n">-</span>
<span class="n">1</span>
<span class="n">0</span>

我怎樣才能做到這一點？

我想建立自己的櫃台。 我可以使用jQuery / JavaScript或任何網絡必須提供的東西。

Answer 1

您想將數字分割成一個數組並進行相應分配：

var n =  101;
n++;
var digits = (""+n).split("");

現在，您可以分配一個數組digits ：

digits[0] = 1
digits[1] = 0
digits[2] = 2

更新只是一個想法，您可以使用容器並動態創建它們，而不必提前創建SPAN：

<div id="counter"></div>

function setCounter(n) {
    digits = (""+n).split("");
    digits.forEach(function(index){
        $("#counter").append("<span class='digit'>"+index+"</span>");
    });
}

這是使用上面的代碼的有效JSFiddle 。

Answer 2

試試這個代碼：

var n = 0,
    placeholders = document.getElementsByClassName('n');

function updateView(number) {
    ('' + number).split('').reverse().forEach(function(el, i) {
        placeholders[placeholders.length - i - 1].innerHTML = el;
    });    
}

在此函數中傳遞任何數字，其數字將放置在適當的位置。 例如：

updateView(85); // => --85

_{（對不起，我不知道如何更好地命名此函數）}

演示： http ： //jsfiddle.net/6dZmT/1/

Answer 3

我從您的例子中假設您的計數器永遠不會超過四位數。 因此，我們可以將數字轉換為字符串，並通過迭代其字符來構建標記。

我做了一個jsfiddle來演示http://jsfiddle.net/H4wQ8/

但是它的核心是這個javascript：

var n = 0;

function buildCounter(number)
{
    var markup = '';

    var numberString = String(number);

    for (var i = 0; i < 4 - numberString.length; i++)
    {
        markup += '<span class="n">-</span>';
    }

    for (var i = 0; i < numberString.length; i++)
    {
        markup += '<span class="n">' + numberString[i] + '</span>';
    }

    $('#counter').html(markup);
}

$(function ()
{
    $('#incrementButton').on('click', function ()
    {
        n++;

        buildCounter(n);
    });

    buildCounter(n);
});

我們使用一個輔助函數來構建標記，並使用jquery將其放置在適當的容器中。