JCrop을 사용하여 여러 사진 자르기

Question

나는 이미지 자르기에 JCrop을 사용하고 있습니다. JCrop은 이미지 자르기 플러그인입니다. 페이지에는자를 이미지가 3 개 있습니다.

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');이있을 때 가끔 첫 번째 또는 세 번째 이미지를 변경한다는 것입니다 내가 jcrop에 대한 배열을 initiliaze 방법

이입니다.

$('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> 

내가 그것을 어떻게 해결할 수 있습니까?

Answer 1

$('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 :

그래서 모든 IMG 태그에 ID = "img_1"ID = "img_2"IMG = "img_3"로 설정된

<!-- 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> 

, 위의 코드와 함께 그것을 확인하고 그것을 바로 작동, 선택한 모든 이미지는 올바른 ID입니다 ..