Question

这是我的代码。我想它应该从THUMB图像的'src'获得第一个字母或数字，并且设置为大版本的源（编号从1到5）。在此之后它应该显示大图像。

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('src').substr(0,1) + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').toggle('bounce').css('margin-top','2.5%');
        });
    });

问题在于，当我加载页面（我使用谷歌浏览器）时，它为所有图像设置图像源如下 - images / screens / i.jpg，因此不显示大图像。

我在这里做错了什么？

Answer 1

由于您只询问了第一个数字或字母，所以应该这样做：

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('src').match(/(\/|^)([a-z0-9])[^\/]*$/i)[2] + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').toggle('bounce').css('margin-top','2.5%');
    });
});

我所做的是使用正则表达式查找最后一个斜杠后的第一个数字或字母，如果没有斜杠，则查找字符串的开头。这样你的缩略图源可以是“/images/screens/1-thumb.jpg”或“1-thumb.jpg”，在这两种情况下你仍会从正则表达式中获得“1”。

有更好的方法可以做到这一点，因为现在您只能使用单个字符文件名。你应该考虑使用拇指的前/后缀，只需删除前/后缀。在这种情况下，您可以使用这种更简单，更清晰的代码：

var src = $(this).attr('src').split('-thumb').join('');

只要您没有-thumb的任何文件夹或文件名，这将支持-thumb附加的任何文件名，例如/images/screens/my-image-thumb.jpg成为/images/screens/my-image.jpg

用jQuery设置'src'属性的问题

1 个答案: