如何用JavaScript根据ID的奇偶性切换默认图片URL？

当然可以实现这个需求！用JavaScript完全能做到根据ID的奇偶性动态替换图片地址，下面给你具体的实现步骤和代码示例：

步骤1：调整HTML结构，让ID更易被JS获取 #

首先我们把PHP输出的ID值存到图片元素的自定义属性里（这样比从span文本里解析更可靠），同时给图片加个类名方便JS选择：

<span style="float:right;"><strong>ID#</strong> '.$row['id'].'</span> <br/> <br />
<img 
  src="pics/comingsoon_new.png" 
  width="400px" 
  height="200px" 
  onerror="this.style.display='none'"
  data-id="'.$row['id'].'"
  class="dynamic-default-image"
/>

步骤2：添加JavaScript逻辑处理奇偶判断 #

在页面底部（或者DOM加载完成的回调里）添加以下JS代码，实现根据ID奇偶性切换图片：

// 确保DOM元素都加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有需要动态切换的图片
  const targetImages = document.querySelectorAll('.dynamic-default-image');
  
  targetImages.forEach(image => {
    // 从自定义属性里获取ID并转成数字
    const requestId = parseInt(image.dataset.id);
    
    // 如果ID不是有效数字，直接跳过
    if (isNaN(requestId)) return;
    
    // 根据奇偶性替换图片地址
    if (requestId % 2 === 0) {
      // 偶数ID使用这张图片
      image.src = 'pics/comingsoon_even.png';
    } else {
      // 奇数ID使用这张图片（如果想保留原默认图，这里可以不用修改，直接注释掉就行）
      image.src = 'pics/comingsoon_odd.png';
    }
  });
});

额外说明 #

• 如果你的场景里只有一张图片需要处理，也可以给img加个id属性（比如id="request-image"），然后用document.getElementById直接选中，不用循环处理。
• 要是你想保留原图片作为其中一种情况的默认值（比如奇数ID用原图），只需要修改偶数ID对应的src即可，奇数的部分不用改动。
• 另外提一句：其实这个需求也可以直接用PHP实现（输出img标签时根据ID奇偶性直接写不同的src），不过既然你指定要用JavaScript，上面的方案完全能满足需求。

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