时间戳

首页 > 解决方案 > 如何通过JS为html元素创建升序号？

javascript - 如何通过JS为html元素创建升序号？

问题描述

我有十个 div，我想在页面加载时通过 JS 将订单号分配到文本中。

HTML：

<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
...
<div class="generate-order-number"></div>

我有这个 JS 代码，但它不工作：

var currentNumber = 0;
window.onload = function generateOrderNumbers(){
    for (var i = 0; i < 10; i++) {
    var currentNumber = currentNumber + 1;
    $('.generate-order-number:eq(' + currentNumber + ')').innerHTML = currentNumber + '.'};
};

所以页面上的结果如下：

1.
2.
...
9.
10.

标签： javascripthtml

解决方案

我看到的三个问题是：

首先，您重新声明currentNumber，这意味着您永远不会增加全局值：

var currentNumber = currentNumber + 1;

不要创建新的局部变量，只需更新全局变量：

currentNumber = currentNumber + 1;

其次，您尝试.innerHTML在 jQuery 对象上进行设置：

$('.generate-order-number:eq(' + currentNumber + ')').innerHTML = currentNumber + '.'

使用 jQuery，您可以调用该.html()函数：

$('.generate-order-number:eq(' + currentNumber + ')').html(currentNumber + '.')

第三，:eq()在你的选择器中使用是基于一的：

$('.generate-order-number:eq(' + currentNumber + ')')

但应该从零开始：

$('.generate-order-number:eq(' + (currentNumber - 1) + ')')

否则第一个元素将为空，其余元素将编号为 1-9。

除此之外，为了使您自己的代码更具可读性和可支持性，我建议清理分号和花括号以使其更加一致。

推荐阅读