如何获取动态生成的首个俱乐部代码存入JS变量以展示球队Logo

实现步骤与代码 #

1. 定位俱乐部代码元素
   先确认feed生成的俱乐部代码所在的HTML结构，比如每个代码可能存在于带特定属性（如data-club-code）的标签中，或者直接是元素的文本内容。

2. 获取首个俱乐部代码
   通过DOM选择器拿到所有代码元素的集合，提取第一个元素的代码值，同时做容错处理避免无元素时报错：

3. 拼接Logo API链接并更新页面
   用拿到的代码拼接API地址，再更新页面上的Logo元素。

// 根据实际HTML结构调整选择器，比如代码在元素文本里就用'.club-code'这类类选择器
const clubCodeElements = document.querySelectorAll('[data-club-code]');

// 初始化变量存储首个代码
let firstClubCode = '';

// 检查元素集合是否存在，再提取第一个代码
if (clubCodeElements.length > 0) {
  // 若代码是元素属性值用getAttribute，若是文本内容则用textContent.trim()
  firstClubCode = clubCodeElements[0].getAttribute('data-club-code');
}

// 替换为你的实际Logo API格式，比如https://api.example.com/logos/{code}.png
const logoUrl = firstClubCode ? `https://your-logo-api-domain.com/${firstClubCode}.svg` : '';

// 更新页面上的Logo（假设页面有id为team-logo的img标签）
const teamLogoImg = document.getElementById('team-logo');
if (teamLogoImg && logoUrl) {
  teamLogoImg.src = logoUrl;
  teamLogoImg.alt = '球队官方Logo';
}

关键注意点 #

• 选择器适配：如果feed生成的代码不是存在自定义属性中，而是直接在元素的文本里，把getAttribute('data-club-code')换成textContent.trim()即可。
• 容错处理：必须判断元素集合是否为空，避免出现undefined导致API链接无效。
• API格式匹配：根据你的Logo API实际要求调整链接拼接规则，比如后缀是png/jpg，或者路径结构不同。

内容的提问来源于stack exchange，提问作者jelmervalk