如何用JS修改::after伪元素的content属性，实时更新点击图片的索引值

实现方案 #

你现有的逻辑已经非常接近最终效果，只需要修正几个小问题即可实现需求：

1. 原代码中重复绑定了点击事件，每次点击图片都会新增一个事件监听，会造成内存冗余
2. 把data-after属性绑定到了被点击的图片上，而非需要更新的.message元素上
3. 属性值硬编码为3，没有使用点击获取到的实际索引值

第一步：补全CSS（解决伪元素定位错位问题） #

你现有CSS缺少.message的相对定位配置，伪元素的绝对定位会默认相对于页面根节点，需要补充：

/* 新增该样式 */
.message {
  position: relative;
}
/* 原有after样式保留即可 */
.message:after {
  content: attr(data-after);
  background-color: #FFC200;
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  color: black;
  right: -20px;
  top: 0;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  font-weight: bold;
}

第二步：替换为优化后的JS代码 #

const images = ['img1', 'img2', 'img3', 'img4'];
const photoOut = document.querySelector('.photos');
const messageEl = document.querySelector('.message'); // 提前获取目标元素，避免重复查询DOM

// 用forEach遍历数组更规范，规避for in可能遍历到原型属性的问题
images.forEach((imgItem, index) => {
  const img = document.createElement('img');
  img.dataset.key = index; // 直接用dataset操作自定义属性更简洁
  img.src = `img/${index}.png`; // 模板字符串拼接路径可读性更高
  photoOut.append(img);
})

// 全局只绑定一次事件监听即可
photoOut.addEventListener('click', showIndex);

function showIndex(event) {
  const clickKey = event.target.dataset.key;
  // 非图片点击直接跳过，避免误触发
  if (clickKey === undefined) return;
  // 直接修改.message的data-after属性，伪元素会自动同步content值
  messageEl.dataset.after = clickKey;
}

可选优化 #

如果需要页面加载完成就默认显示初始索引值，在JS代码最后加一行即可：

messageEl.dataset.after = 0; // 初始默认显示0，可自定义为你需要的默认值

内容的提问来源于stack exchange，提问作者Dis pi s