为超链接 onclick 事件动态分配唯一的 id 值

Question

我正在尝试遍历 JSON 响应对象以创建类别项目列表。我正在尝试为每个超链接分配唯一的类别 ID 值，以便当用户单击超链接时，他们将转到第 2 页，然后该页面将根据所选的类别 ID 进行过滤。我在我的 FOR 循环中遇到了一个逻辑错误，其中所有类别 ID 都被分配给了一个超链接。另外，有没有更好的方法在HTML页之间传递数据？

FIDDLE

$(document).ready(function() {


  $.ajax({
url: "https://api.coursera.org/api/catalog.v1/categories",
type: 'GET',
dataType: "json",
success: function(data) {
    //alert(data.elements.length);


        for(var i = 0; i < data.elements.length; i++)
    {                       
        $("#courseLink").append("<a href='page2.html?CatId="+data.elements[i].id+"'>"+data.elements[i].name+"</a><br/>"); 
         $("#courseLink").click(function() {
            $("#test").append("work");
        });

    }



}


  }); 
});

Answer 1

这里有几个问题。

问题一：

您试图在 #courseLink 内附加 links，这也是一个 link（<a> 标签）。

问题二：

$("#courseLink").click(function() {
  $("#test").append("work");
});

单击事件绑定发生在 每次迭代 时，这意味着词 "work" 将被追加的次数与表单中的迭代次数一样多。此外，事件应绑定到 class 选择器而不是 id（.courseLink 而不是 #courseLink），因为 ids 应该是唯一的。

我modified your fiddle为了每次点击仅附加一次单词"work"。

为超链接 onclick 事件动态分配唯一的 id 值

Dynamically assign unique id value to hyperlink onclick event

arrays

api

jquery

coursera-api