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或Web提供的任何东西。

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

传递此功能中的任何数字，其数字将被放置在适当的位置。 E.g：

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将它放在适当的容器中。

如何使用JavaScript将数字添加到不同的跨度？

3 个答案:

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