Question

我有一个REST后端链接mywebsite/guests，它返回来宾列表。在前端，我想将客人显示为链接。这是代码

for(guest of guests) {
  $('#guest_list').append('<a onclick="showGuest(' + guest.id + ')">' + guest.name + '</a><br>')
}

function showGuest(id) {
  console.log(id)
  ...
}

我应该提到guest.id是一个字符串。

控制台始终打印undefined。我的问题是，如何使用String参数添加这些链接？

Answer 1

for(guest of guests) {
  $('#guest_list').append('<a onclick="showGuest(this)" data-id='+guest.id+'>' + guest.name + '</a><br>')
}

function showGuest(this) {

console.log($(this).data('id'))
}

Answer 2

解决此问题的方法取决于guests变量的格式和内容。如果您从这个对象开始：

var guests = {
  '123': {id: 123, name: 'joe'},
  '234': {id: 234, name: 'jane'}
};

然后key将是＆＃34; 123＆＃34;和＆＃34; 234＆＃34;在以下循环中，对象值为guests[key]：

for(var key in guests) {
  $('#guest_list').append('<a onclick="showGuest(' + guests[key].id + ')">' + guests[key].name + '</a><br>')
}

function showGuest(id) {
  console.log(id)
  ...
}

但如果您已经在使用jQuery，请查看jQuery.each以获取其他循环选项。

另一方面，如果guests是一个数组，如：

var guests = [
  {id:"123", name:"joe"},
  {id:"234", name:"jane"}
];

那么你只想使用类似的东西：

for(var i=0; i < guests.length; i++) {
  // id is guests[i].id
  // name is guests[i].name
}

Answer 3

主要问题是您尝试访问showGuest(id)函数中动态绑定DOM元素的属性。您应该按以下方式使用onClick功能 -

var guests = [{"id":1, "name":"John Doe"}, 
                {"id":2, "name":"David Jones"}];

for(guest of guests) {
    $('#guest_list').append('<a class="guest" data-id="'+guest.id+'">' + guest.name + '</a><br>');
}

$('#guest_list').on('click', 'a.guest', function() {
    var id = $(this).attr('data-id');
    $('.message').text('').append("Clicked guest with ID: "+id);
});

在这里工作JSFiddle - https://jsfiddle.net/2dkpsve8/

希望这有帮助！

Answer 4

令人惊讶的是，

$('#guest_list').append('<a onclick="showGuest(' + "guest.id" + ')">' + guest.name + '</a><br>')

工作正常！我不知道。 "guest.id"将替换为来宾的实际ID。

使用String参数动态添加链接

4 个答案: