Jquery - 将 src 和 srcset 的 .jpg 更改为 .gif答案

【问题标题】：Jquery - Changing .jpg to .gif for src as well as srcsetJquery - 将 src 和 srcset 的 .jpg 更改为 .gif
【发布时间】：2018-03-09 17:27:04
【问题描述】：

所以我希望能够在父行悬停时将 .jpg 切换为 .gif 时获得 wordpress 的响应式图像（在 srcset 中指定）。

我已经能够让它为 src 工作，但不适用于 srcset。我是 jquery 的新手。

$j(".featured-row").mouseenter(
    function() {
        var src = $j("img", this).attr("src");
        var srcset = $j("img", this).attr("srcset");
        $j("img", this).attr("src", src.replace(/\.jpg$/i, ".gif"));
        $j("img", this).attr("srcset", srcset.replace(/\.jpg$/i, ".gif"));
    }),
$j(".featured-row").mouseleave(function() {
    var src = $j("img", this).attr("src");
    var srcset = $j("img", this).attr("srcset");
    $j("img", this).attr("src", src.replace(/\.gif$/i, ".jpg"));
    $j("img", this).attr("srcset", srcset.replace(/\.gif$/i, ".jpg"));
});`

正如我提到的用于替换 src 的部分工作正常。只是不是 srcset。

下面给出了一个示例img url

<img width="1060" height="600" src="http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2.jpg" class="vc_single_image-img attachment-full" alt="" srcset="http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2.jpg 1060w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-300x170.jpg 300w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-768x435.jpg 768w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-1024x580.jpg 1024w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-700x396.jpg 700w" sizes="(max-width: 1060px) 100vw, 1060px">

【问题讨论】：

将g 标志添加到srcset 中的正则表达式中，您可以在字符串中进行多个替换。

标签： jquery replace

【解决方案1】：

srcset 属性包含：

srcset="http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2.jpg 1060w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-300x170.jpg 300w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-768x435.jpg 768w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-1024x580.jpg 1024w, http://adwaitpawar.com/niyo/wp-content/uploads/2018/03/n15-2-700x396.jpg 700w"

这些包含多个.jpg，因此您应该添加全局修饰符/g。

此外，您的正则表达式匹配 .jpg$ 和一个美元符号，该符号将匹配行尾的 .jpg。

你可以更新这一行：

srcset.replace(/\.jpg$/i, ".gif")

到

srcset.replace(/\.jpg/gi, ".gif")

还有

srcset.replace(/\.gif$/i, ".jpg")

到

srcset.replace(/\.gif/ig, ".jpg")

【讨论】：

优秀。这在很大程度上解决了我的问题。谢谢。