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

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

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

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

$(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;
        }
    });
});

Answer 2

更好地使用indexOf('.')而不是indexOf('jpg')为了任何值得的东西。为什么您只想将其修复为“jpg”？你为什么不要求一个更小的图像呢？