在JavaScript中以编程方式设置唯一的对象ID

Programmatically setting a unique object ID in JavaScript

本文关键字：唯一 对象 ID 设置 方式 JavaScript 编程      更新时间：2023-09-26

我有以下代码

<div id='show_test'></div>

和

var matches = [{
    "category_name": "category_1",
    "stock_name": "stock_1",
    "supplier_stock": "supplier_stock_1"
}, {
    "category_name": "category_2",
    "stock_name": "stock_2",
    "supplier_stock": "supplier_stock_2"
}, {
    "category_name": "category_3",
    "stock_name": "stock_3",
    "supplier_stock": "supplier_stock_3"
}, {
    "category_name": "category_4",
    "stock_name": "stock_4",
    "supplier_stock": "supplier_stock_4"
}];
matches.forEach(function(i, item) {
    var arrayDt = [];
    arrayDt[i, item] = {
        "category_name": this.category_name,
        "stock_name": this.stock_name,
        "supplier_stock": this.supplier_stock
    };
    document.getElementById("show_test").innerHTML += "<div><a id='bt_" + item + "'>click</a></div>";
    document.getElementById("bt_" + item).onclick = function() {
        show_data(i);
    }
    console.log(document.getElementById("bt_" + item));
    console.log(i);
});
function show_data(data) {
    alert(JSON.stringify(data));
}

在页面上，我们显示4个链接，当我点击最后一个链接，脚本功能如预期。但不是前三个。为什么前3个链接不起作用?

https://jsfiddle.net/a35wL5ht/

replace 

document.getElementById("show_test").innerHTML += '<div><a href="#" id="bt_' + item + '">click</a></div>';


var el = document.createElement("div");
var a =  document.createElement("a");
a.innerHTML = "click";
a.id = "bt_" + item;
el.appendChild(a);
document.getElementById("show_test").appendChild(el);
相关文章：