2

同じクラスの 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 から 150 ピクセルにトリミングされますが、問題は 2ndimg.jpg が 1stimg.jpg に置き換えられることです。とにかく、個々の div で実行されるようにコードを修正するには?

どんな助けでも大歓迎です。

4

3 に答える 3

2

画像にコードを適用するだけです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;
});
于 2012-09-04T15:41:43.057 に答える
1 
$("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);
});
于 2012-09-04T15:42:06.673 に答える
1

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

attributeName設定する属性の名前。

function(index, attr)設定する値を返す関数。this現在の要素です。セット内の要素のインデックス位置と古い属性値を引数として受け取ります。

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

フィドル

于 2012-09-04T15:47:06.853 に答える