Question

HTML标记：

<div class="postbody">
<a href="#"><img src="http://1stimg.jpg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://2ndimg.jpeg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://3rdimg.png?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://4thimg.gif?width=300"></a>
</div>

我使用下面的代码裁剪上面的图片，但它仅适用于第一张图片：

<script type="text/javascript">
$("div.postbody img").each(function() {
    var iu = this.src;
    iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
    this.src = iu;
});
</script>

非常感谢任何帮助。

Answer 1

更好地使用indexOf('.')代替indexOf('jpg')，无论价值多少。为什么你只想把它修复为'jpg'？你为什么不要求更小的图像呢？

Answer 2

您正在替换所有源属性，无论它是否与扩展名匹配。

在执行替换之前检查正确的扩展名：

$(function() {
    $("div.postbody img").each(function() {
        var iu = this.src;
        if (iu.indexOf('jpg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
        else if (iu.indexOf('jpeg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpeg')) + 'jpeg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
    });
});

裁剪图像无论文件扩展名是什么

2 个答案: