jQuery实现WordPress响应式图片hover时.jpg转.gif（srcset失效问题）

嘿，我懂你现在的困扰——鼠标悬停父行时，图片的src能成功从.jpg换成.gif，但WordPress生成的srcset里的响应式链接就是没变化，对吧？这问题其实是因为srcset的结构比src复杂，它是由多个带尺寸标记的URL用逗号拼接而成的，不能直接像替换src那样简单处理。下面给你一套可行的jQuery方案：

完整代码实现 #

// 替换成你实际的父行选择器，比如.post-row或者.table-row
$('.parent-row').hover(
  // 鼠标进入时：替换图片为GIF
  function() {
    $(this).find('img').each(function() {
      // 先保存原始的src和srcset到data属性，方便鼠标离开时还原
      $(this).data('original-src', $(this).attr('src'));
      $(this).data('original-srcset', $(this).attr('srcset'));

      // 处理普通src属性
      const updatedSrc = $(this).attr('src').replace(/\.jpg$/, '.gif');
      $(this).attr('src', updatedSrc);

      // 处理srcset属性（如果存在的话）
      if ($(this).attr('srcset')) {
        // 把srcset按逗号分割成单个URL项的数组
        const srcsetItems = $(this).attr('srcset').split(',');
        // 遍历每个URL项，替换结尾的.jpg为.gif
        const updatedSrcset = srcsetItems.map(item => {
          // trim()去掉前后空格，正则匹配结尾的.jpg替换
          return item.trim().replace(/\.jpg$/, '.gif');
        }).join(', '); // 重新拼接成符合srcset格式的字符串
        
        $(this).attr('srcset', updatedSrcset);
        // 手动触发浏览器更新srcset（避免jQuery attr更新不生效的问题）
        this.srcset = updatedSrcset;
      }
    });
  },
  // 鼠标离开时：还原回原始的JPG图片
  function() {
    $(this).find('img').each(function() {
      const originalSrc = $(this).data('original-src');
      const originalSrcset = $(this).data('original-srcset');

      // 还原src
      if (originalSrc) $(this).attr('src', originalSrc);
      // 还原srcset
      if (originalSrcset) {
        $(this).attr('srcset', originalSrcset);
        this.srcset = originalSrcset;
      }
    });
  }
);

关键细节说明 #

• 保存原始值：用data()方法存储图片原本的src和srcset，而不是用反向替换（比如把.gif再换回.jpg），这样能避免多次悬停导致的替换错误。
• 精准替换：用正则/\.jpg$/只匹配URL结尾的.jpg，防止误替换路径中包含“jpg”的文件夹名称或其他字符。
• 强制更新srcset：手动给DOM元素的srcset属性赋值，是因为有时候jQuery的attr()方法更新后，浏览器不会立即重新解析srcset，这一步能确保响应式图片的URL及时更新。

注意事项 #

1. 确保你把代码中的.parent-row替换成实际的父行元素选择器（比如你的表格行是.wp-table-row，或者文章列表行是.post-item）。
2. 要保证对应的.gif图片存在，并且尺寸和WordPress生成的响应式.jpg图片一致，这样srcset里的宽度标记（比如300w）才能正常工作。
3. 如果你的图片用了webp等其他格式的后备，可能需要调整正则匹配的后缀，但你的需求是替换.jpg，所以当前代码足够。

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