Question

我有这样的网址：http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/logo.png

我想要做的是，当屏幕宽度小于768px时，我可以更改网址，而不是“logo.png”，它会显示“mobile-logo.png”。

是否有类似于“PHP explode”的功能，我可以将徽标部分作为目标并将其替换为“mobile-logo”？

问题是URL是动态的，所以如果我举例说，我想在10个字符后添加单词“mobile”，它可能无效，因为url会改变，所以它把它放在错误的地方。 / p>

有没有一点javascript / jQuery来做这个？非常感谢

Answer 1

你可以用css做到这一点。只需使用两个<img>来解决此问题，例如：

HTML：

<img class="show-on-desktop" src="http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/logo.png" />
<img class="show-on-mobile" src="http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/mobile-logo.png" />

CSS：

.show-on-mobile{
    display: none;
}

@media only screen and (max-width: 768px){
    .show-on-desktop{
        display: none;
    }

    .show-on-mobile{
        display: block;
    }
}

工作示例：https://jsfiddle.net/5kb6ndsp/

Answer 2

我绝对会在服务器端做过这种处理，但是如果你必须在客户端进行，那么这是一个简单的jQuery语句来做到这一点

$("img").each(function(i, img){
    var originalLink = $(img).attr("href");
    var fileName = originalLink.split("/").slice(-1)[0];
    $(img).attr("href", originalLink.replace(fileName, "mobile-" + fileName));
    console.log($(img).attr("href"));
});

将文本注入到img标记的“URL”部分

2 个答案: