1

这是我的代码。我想它应该从 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，因此不显示大图像。

我在这里做错了什么？

4

1 回答 1

2

由于您只要求第一个数字或字母，因此应该这样做：

$('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

于 2012-12-31T17:58:20.237 回答