Question

感谢dmikester1，我有一个LeaderBoard代码，该代码使用Javascript数据根据玩家的得分来创建和排序玩家。

该代码仅对每个玩家的个人资料使用一个来源和一个图片。但是显然我想为每个玩家加载唯一的图片作为他们的个人资料图片...

这是运行中的代码JSFiddle

还有

Javascript：

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profiles.push(profile4);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) { 
return b.points-a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

let count = 1;
profiles.forEach(function(entry) {
    let img = document.createElement('img');
  img.className = "profilePic";
  img.src = "https://placeimg.com/50/50/people";
    let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>"+ entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
    profilesDiv.appendChild(profile);
  count++;

});

CSS：

.profile {
  border: 2px solid #555555;
  padding: 10px;
  margin: 5px;
  width: 30%;
  height: 50px;
  line-height: 50px;
}

.profile img, .profile .name {
  float: left;
  margin-right: 20px;
}

.profile .count {
  float: left;
  margin-right: 5px;
}

.profile img {
  border-radius: 50%;
  box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);
}

.points {
  float: right;
}

HTML：

<div class="profiles">

</div>

Answer 1

此行：

img.src = "https://placeimg.com/50/50/people";

设置每个播放器的图像源。

如果希望每个玩家都有唯一的个人资料图片，则应在每个玩家个人资料中添加src属性。

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.src = "Image source here";
profiles.push(profile1);

然后在forEach循环中：

profiles.forEach(function(entry) {
  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.src;
  /....
 )}

Answer 2

您必须为每个配置文件添加一个属性图片

profile1.img= "https://randomuser.me/api/portraits/men/12.jpg"

然后检索它以显示每个配置文件

img.src = entry.img;

JavaScript

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.img= "https://randomuser.me/api/portraits/men/12.jpg"
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profile2.img= "https://randomuser.me/api/portraits/women/22.jpg"
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profile3.img= "https://randomuser.me/api/portraits/men/22.jpg"
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profile4.img= "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile4);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) { 
return b.points-a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

let count = 1;
profiles.forEach(function(entry) {
    let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;
    let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>"+ entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
    profilesDiv.appendChild(profile);
  count++;

});

CSS

.profile {
  border: 2px solid #555555;
  padding: 10px;
  margin: 5px;
  width: 30%;
  height: 50px;
  line-height: 50px;
}

.profile img, .profile .name {
  float: left;
  margin-right: 20px;
  width: 50px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
}

.profile img {
  border-radius: 50%;
  box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);
}

.points {
  float: right;
}

https://jsfiddle.net/ev0ncpy3/1/

将唯一图像添加到javascript对象

2 个答案: