使用jQuery根据data属性值修改图片src属性的实现方法

没问题，我来帮你搞定这个需求！你思路是对的——用循环遍历每个目标元素，再根据data-window的属性值设置对应的图片src就行。下面给你两种常用的实现方案，你可以根据项目情况选择：

如果你项目里已经引入了jQuery，用它的.each()循环会非常直观：

// 遍历所有带.champions-category类的图片
$('.champions-category').each(function() {
  // 获取当前图片的data-window属性值
  const windowType = $(this).data('window');
  
  // 根据属性值匹配对应的图片路径
  let imgSrc = '';
  if (windowType === 'teamwork') {
    imgSrc = '/images/teamwork-banner.jpg'; // 替换成你的实际路径
  } else if (windowType === 'focus') {
    imgSrc = '/images/focus-banner.jpg';
  } else if (windowType === 'results') {
    imgSrc = '/images/results-banner.jpg';
  } else {
    // 处理未匹配到的情况，设置默认图片
    imgSrc = '/images/default-category.jpg';
  }
  
  // 更新当前图片的src属性
  $(this).attr('src', imgSrc);
});

小说明： #

• $(this).data('window')是jQuery简化获取data-*属性的方法，等价于$(this).attr('data-window')
• 记得把代码里的图片路径替换成你项目里的真实路径

如果你的项目没有依赖jQuery，原生JS同样能轻松实现，而且不需要额外引入库：

// 获取所有目标图片元素
const categoryImages = document.querySelectorAll('.champions-category');

// 遍历每个图片元素
categoryImages.forEach(img => {
  // 获取data-window属性值（原生dataset API会自动处理data前缀）
  const windowType = img.dataset.window;
  
  // 用switch-case匹配路径，也可以用if-else
  let imgSrc = '';
  switch(windowType) {
    case 'teamwork':
      imgSrc = '/images/teamwork-banner.jpg';
      break;
    case 'focus':
      imgSrc = '/images/focus-banner.jpg';
      break;
    case 'results':
      imgSrc = '/images/results-banner.jpg';
      break;
    default:
      imgSrc = '/images/default-category.jpg';
  }
  
  // 直接赋值给src属性
  img.src = imgSrc;
});

进阶优化建议 #

如果后续data-window的属性值会增加，用对象映射的方式会更易维护，不用写一堆if-else或switch：

// 先定义属性值和图片路径的映射关系
const srcMapping = {
  teamwork: '/images/teamwork-banner.jpg',
  focus: '/images/focus-banner.jpg',
  results: '/images/results-banner.jpg'
};

// 遍历的时候直接取映射值，没有匹配到就用默认图
categoryImages.forEach(img => {
  const windowType = img.dataset.window;
  img.src = srcMapping[windowType] || '/images/default-category.jpg';
});

这种方式新增属性值时，只需要在srcMapping里添加键值对就行，代码更简洁。

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