使用String參數動態添加鏈接

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將為“ 123”和“ 234”，並且對象值將為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代替。