在 jquery 的 src 属性中使用变量
use variable inside src attribute with jquery
我在网站项目中使用 B-Lazy 插件 (http://dinbror.dk/blog/blazy/)。我想根据 windows 宽度加载不同的图像:
如果 window 宽度 < 420px,插件接受加载其 'data-src' 被 'data-src-small' 替换的 img。
所以,我想获取数据源图像 url 并添加到 '.jpg' 之前的末尾 '-228x170',就像这样:
<img data-src="img-name.jpg" >
变得
<img data-src-small="img-name-228x170.jpg" >
这是我的代码:
`
$('img').addClass('b-lazy');
$("img.b-lazy").each(function() {
$(this).attr("data-src",$(this).attr("src"));
$(this).attr('src','data:trans.gif');
var src = $(this).attr('data-src');
$(this).attr('src', 'src + -228x170.jpg' ); //here my mistake
});
`
给你,只需更改引号所在的位置,并删除初始扩展名:
var src = $(this).attr('data-src').replace('.jpg', '');
$(this).attr('src', src + '-228x170.jpg' );
评论中的每个问题:
var src = $(this).attr('data-src').replace('.jpg', '');
var specialChars = ('fooo'); //this can be set dynamically
$(this).attr('src', src + '-228' + specialChars + '.jpg' );
HTH,
-泰德
我在网站项目中使用 B-Lazy 插件 (http://dinbror.dk/blog/blazy/)。我想根据 windows 宽度加载不同的图像:
如果 window 宽度 < 420px,插件接受加载其 'data-src' 被 'data-src-small' 替换的 img。
所以,我想获取数据源图像 url 并添加到 '.jpg' 之前的末尾 '-228x170',就像这样:
<img data-src="img-name.jpg" >
变得
<img data-src-small="img-name-228x170.jpg" >
这是我的代码: `
$('img').addClass('b-lazy');
$("img.b-lazy").each(function() {
$(this).attr("data-src",$(this).attr("src"));
$(this).attr('src','data:trans.gif');
var src = $(this).attr('data-src');
$(this).attr('src', 'src + -228x170.jpg' ); //here my mistake
});
`
给你,只需更改引号所在的位置,并删除初始扩展名:
var src = $(this).attr('data-src').replace('.jpg', '');
$(this).attr('src', src + '-228x170.jpg' );
评论中的每个问题:
var src = $(this).attr('data-src').replace('.jpg', '');
var specialChars = ('fooo'); //this can be set dynamically
$(this).attr('src', src + '-228' + specialChars + '.jpg' );
HTH, -泰德