我有一个网络应用程序,用其他img替换了几个img。
例如:路径为http://example.com/example/example/images/dir/1.gif的图片已使用http://cdn.example.com/dir/1.gif重新定位。
为此,我使用jQuery attr()。
所以我的代码看起来像这样:
$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")
有没有办法压缩这个?所以它用较少的字符书写?
注意:在每一行上,两个网站上的图像都是相同的。例如,1.gif再次被1.gif替换,但是不同的服务器。 所以基本上我想更换服务器。当http://www.example.com/dir/images/dir/替换为http://cdn.example.com/dir/时。
非常感谢
答案 0 :(得分:1)
你需要JavaScript的.replace()方法和正则表达式来替换东西。
在jQuery中,属性选择器^=
表示查找以。开头的属性值。
试试这个,我假设它的所有图像都以'www.example.com'开头:
$('img[src^="http://www.example.com/dir/images/dir"]').attr('src',
function(i,src){
return src.replace('example.com/dir/images/dir','cdn.example.com/dir')
});
答案 1 :(得分:1)
就像使用循环一样简单:
var i;
for ( i = 1; i <= 10; i++ )
{
$('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif');
}
或者您是否要求查找并替换所有人?
您可以使用attr starts with selector:
$('img[src^="http://www.example.com/"]').each(function(index,element){
var $this, src, newSrc;
$this = $(this);
src = $this.attr('src');
//do your replacement here
newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
$this.attr('src', newSrc);
});
正如Moin Zaman指出的那样,attr也可以将一个函数作为参数,这会将此脚本缩短为:
$('img[src^="http://www.example.com/"]').attr('src', function(index, src){
return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
});