0

画像のトリミングにはJCropを使用しています。JCrop は画像トリミング プラグインです。ページには、トリミングする 3 つの画像が含まれています。

これは、jcrop の配列を初期化する方法です。

var jcrop = [];

で、〜がある：

$('img.picture').each(function(){
    imgcrop = $(this);
    imgcrop.Jcrop({
        bgColor: 'white',
        aspectRatio: 1
    }, function(){
        jcrop.push(this);
        });
});

問題は、私がjcrop[1].setImage( '/image/no-picture.jpg' );それを持っていると、最初または3番目の画像が変わることがあることです。

$('div.deletePhoto a').bind('click', function(e){
    e.preventDefault();
    var index =$('div.deletePhoto').index($(this).parent());

    $.post('/deletePicture', function(data){
        alert(index);
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    });
});

変数indexは問題ありませんが、jcrop[index]そうではありません。

HTML:

    <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

どうすれば修正できますか？

4

1 に答える 1

0 
$('img.picture').each(function(){
    imgcrop = $(this);
    imgcrop.Jcrop({
        bgColor: 'white',
        aspectRatio: 1
    }, function(){

        jcrop.push($(this)); //the $(this) is important

        });
});

と

$('div.deletePhoto a').bind('click', function(e){
    e.preventDefault();

    var index = $('div.deletePhoto').index($(this).parent()); //return it to this

    $.post('/deletePicture', function(data){
        alert(jcrop[index].attr('id'));
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    });
});

html:

 <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_1" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_2" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_3" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

したがって、すべての img タグに id="img_1", id="img_2", img="img_3" を設定し、上記のコードをチェックして正しく動作し、選択したすべての画像が正しい ID です。

于 2012-10-22T06:39:45.133 に答える