Jcrop中的多張圖片和prewievs。如何通過許多ID的JavaScript函數

Question

我在我的應用程序中使用Jcrop插件（JQuery）。我決定使用一些Ajax解決方案，但在傳遞值的功能方面存在問題。我不知道是否我缺乏JavaScript技能或Jcrop問題。 這裏是代碼

jQuery(window).load(function(){ 

      jQuery('#cropbox').Jcrop({ 
       onChange: showPreview, 
       onSelect: showPreview, 
       aspectRatio: 1 
      }); 

     }); 

     // Our simple event handler, called from onChange and onSelect 
     // event handlers, as per the Jcrop invocation above 
     function showPreview(coords) 
     { 
      if (parseInt(coords.w) > 0) 
      { 
       var rx = 100/coords.w; 
       var ry = 100/coords.h; 

       jQuery('#preview').css({ 
        width: Math.round(rx * 500) + 'px', 
        height: Math.round(ry * 370) + 'px', 
        marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
        marginTop: '-' + Math.round(ry * coords.y) + 'px' 
       }); 
      } 
     } 

工作有一個畫面例子是在這裏： link text

我要的是通過多個參數的功能showPreview（coords）使用，如：

 function showPreview(coords,id,size_x,size_y) 
     { 
      if (parseInt(coords.w) > 0) 
      { 
       var rx = 100/coords.w; 
       var ry = 100/coords.h; 

       jQuery('#'+id).css({ 
        width: Math.round(rx * size) + 'px', 
        height: Math.round(ry * size_y) + 'px', 
        marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
        marginTop: '-' + Math.round(ry * coords.y) + 'px' 
       }); 
      } 
     } 

但出現錯誤。如何解決？

Answer 1

嘗試設置showPreview函數以外的變量。我稍微重新格式化腳本以使JSLint高興。

jQuery(window).load(function(){ 

// define these variables outside of the showPreview function 
var id = 'preview', 
    size_x = 500, 
    size_y = 370, 
    showPreview = function(coords){ 
     if (parseInt(coords.w,10) > 0){ 
     var rx = 100/coords.w; 
     var ry = 100/coords.h; 

     jQuery('#'+id).css({ 
     width: Math.round(rx * size_x) + 'px', 
     height: Math.round(ry * size_y) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
     }); 
     } 
    }; 

jQuery('#cropbox').Jcrop({ 
    onChange: showPreview, 
    onSelect: showPreview, 
    aspectRatio: 1 
}); 

}); 

Answer 2

jQuery('.image_to_crop').each(function() { 
    image_to_crop = $(this); 
    image_to_crop.Jcrop({ 
    onChange: function(coords){showPreview(image_to_crop, coords);}, 
    ... 
} 

function showPreview(image_to_crop, coords) { 
    ... 
} 

使用這種方法，你可以通過任何你想要的showPreview功能（我通過圖像本身，但你可以使用一個ID或......）

Answer 3

這對我的作品..

$('.workitem-main').each(function() { 
     $(this).Jcrop({ 
      onChange: jcrop_target($(this)), 
      onSelect: jcrop_target($(this)), 
      aspectRatio: 1.336 
     }); 

     function jcrop_target(my_id) { 
      return function (c) { updatePreview(my_id, c); }; 
     }; 

     function updatePreview(my_id, c) { 
      var api = $(my_id).data('Jcrop'); 
      var bounds = api.getBounds(); 
      boundx = bounds[0]; 
      boundy = bounds[1]; 

      if (parseInt(c.w) > 0) { 
       var rx = 167/c.w; 
       var ry = 125/c.h; 

       $('.workitem-thumb').css({ 
        width: Math.round(rx * boundx) + 'px', 
        height: Math.round(ry * boundy) + 'px', 
        marginLeft: '-' + Math.round(rx * c.x) + 'px', 
        marginTop: '-' + Math.round(ry * c.y) + 'px' 
       }); 
      } 
     }; 
    }); 

請注意，這依賴於未記錄的'var api = $（my_id）.data（'Jcrop'）;'

Answer 4

<img class="imageToCrop" data-id="1" src="..." /> 

$('.imageToCrop').Jcrop({ 
    onSelect: function (coords) { 
     var id = $(this.ui.holder[0]).children('.imageToCrop').data('id'); 
     showPreview(coords, id); 
    } 
}); 

function showPreview(coords, id) 
{ 
    var previewElem = '#preview' + id; 

    var rx = 100/coords.w; 
    var ry = 100/coords.h; 

    $(previewElem).css({ 
     width: Math.round(rx * 500) + 'px', 
     height: Math.round(ry * 370) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
} 

無需循環。只需爲每個您想要裁剪的圖像分配一個類：在這種情況下，'.imageToCrop'。您然後使用該類來實例化Jcrop：$（'。imageToCrop'）。Jcrop（）;

然後，您可以爲每個圖像分配一個唯一的data-id，您可以將其傳遞給showPreview（）函數。這將允許您指定相關的預覽元素：preview1，preview2等...