Question

我正在尝试迭代JSON响应对象以创建类别项列表。我正在尝试为每个超链接分配唯一的类别ID值，以便当用户单击超链接时，他们将转到第2页，然后页面将根据所选的类别ID进行过滤。我在FOR LOOP中遇到逻辑错误，其中所有类别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

这里有几个问题。

问题1：

您试图在#courseLink内附加链接，这也是一个链接（<a>标记）。

问题2：

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

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

我modified your fiddle为每次点击只附加一次“工作”一词。

动态地为超链接onclick事件指定唯一的id值

1 个答案: