Question

这是一个非常有趣的话题，请继续阅读：

想象一下，您使用插件并希望即时更改设置，如果插件没有内置选项请求，有2个选项可以实现此目的：

您修改插件以处理请求中的选项
您尝试修改javascript onrequest。

它是一个一般主题，但让我们以这个简单的图像裁剪插件为例： http://deepliquid.com/projects/Jcrop/

如果我想在链接上点击更改宽高比。

页面加载设置：

<script>
    jQuery(function($){
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 2/3
      }
</script>

更改设置，点击

<script>
    jQuery(function($){
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1/2
      }})
</script>

我现在想知道jquery或javascript是否能够按照2.方法杀死第一个javascript（就像它可以用div轻松完成）并用第二个javascript替换它。我已经尝试过提供一个脚本名称标签来识别但没有成功。在div中包装javascript似乎不符合w3标准。有人知道如何实现这个目标吗？

也许有人会分步一步一步地轻松修改插件，以便在类似的请求中采取额外的选项：

<div class="target {aspectRatio:1/2}

感谢您的想法

Answer 1

对于Jcrop：

jQuery(function($){
  $('#my_jcrop').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: old_aspectRatio
  }};

我改变了这种方式的aspectRatio

$('#my_jcrop').Jcrop({aspectRatio: new_aspectRatio['x']/new_aspectRatio['y']});

和功能updatePreview

function updatePreview(c)
   {
 if (c.w!=0 && c.h!=0){ 
    coord = c;
 }
    if (parseInt(c.w) > 0)
    {
      var rx = preview_size['x']/c.w;
      var ry = preview_size['y']/c.h;

   preview.width = Math.round(rx * boundx) + 'px';
      preview.height = Math.round(ry * boundy) + 'px';
      preview.marginLeft = '-' + Math.round(rx * c.x) + 'px';
      preview.marginTop = '-' + Math.round(ry * c.y) + 'px';

      $('#preview').css({
        width: preview.width,
        height: preview.height,
        marginLeft: preview.marginLeft,
        marginTop: preview.marginTop
      });
    }
  };

我更改了preview_size ['x']和preview_size ['y']的值：

preview_size['x'] = new_aspectRatio['x'];
preview_size['y'] = new_aspectRatio['y'];

所以如果新图片尺寸为200x400px，那么aspectRatio将为200/400 = 1/2

Answer 2

尝试使用数据属性 - <div class="target" data-aspect-ratio="1/2">

 $('.target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: $(this).attr('data-aspect-ratio')
  }

即时更改jquery（插件）选项

2 个答案: