Question

我正在尝试使用相同的类在div中裁剪图像。我使用以下代码：

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

以下是HTML标记：

<div class="postbody">
<a href="#"><img src="http://1stimg.jpg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://2ndimg.jpg?width=300"></a>
</div>

使用上面的代码段工作并裁剪300到150px的原始图像，但问题是2ndimg.jpg正在被1stimg.jpg取代。无论如何修改代码，使其在单独的div上运行？

非常感谢任何帮助。

Answer 1

只需应用each图片的代码：

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

Answer 2

$("div.postbody img").each(function(e) {

    var iu = $(this).attr("src");
    iu = iu.substr(0, iu.indexOf('?')) + '?width=150&height=150&crop=1%3A1';
    $(this).attr("src", iu);
});

Answer 3

.attr( attributeName, function(index, attr) )

attributeName要设置的属性的名称。

function(index, attr)将值返回到set的函数。 this是当前元素。接收集合中元素的索引位置和旧属性值作为参数。

$("div.postbody img").attr("src", function(i, cur){
     cur = cur.substr(0, cur.indexOf('?')) + '?width=150&height=150&crop=1%3A1';
     return cur;
});

Fiddle

在具有相同类的每个div上裁剪图像

3 个答案: