使用jquery imgAreaSelect防止多个图像选择

时间:2012-02-17 14:49:10

标签: jquery jquery-plugins

我正在使用流行的图像选择jquery插件imgAreaSelect - http://odyniec.net/projects/imgareaselect

页面可以包含任意数量的图像,因此我为图像分配了一个类,以便在所有图像上启用代码。

$('img.select').imgAreaSelect({
...
});

问题是,一旦我想要阻止在页面上的其余图像上进行另一个选择的任何一个图像上进行了选择。基本上我希望禁用所有图像的插件,除了我选择的图像。

我还希望能够使用我保存的坐标在某个时刻再次编辑选择,所以这就是实例api的来源 - http://odyniec.net/projects/imgareaselect/usage.html#api-methods

因此,我会考虑按照

的方式做一些事情
var select1 = $('img.select1').imgAreaSelect({
...
});

var select2 = $('img.select2').imgAreaSelect({
...
});

etc

问题是没有定义数量的图像。我可以使用像$('img.select').each()这样的东西吗?尽管如此,仍然无法为其添加数字。我想设置api实例部分将有助于解决我的第一个问题。

我的问题是,我如何为页面上的每个img动态创建一个imgAreaSelect实例,其中包含一个select类(并且可能附加一个数字(我已经存储在{{1}中) ()attr))并且当选择图像时禁用页面上的所有其他实例?谢谢!

1 个答案:

答案 0 :(得分:1)

好的,我已经使用.each()浏览每个图像并将imgAreaSelect的实例添加到数组中。从那里我可以打电话给我需要的任何图像。

var images = {};
var i = 1;
$('img.select').each(function (){
   images[i] = $('img.select.' + i).imgAreaSelect({
   ...
   });
   i++;
});

它可能不是最好或最有效的方式......虽然对我来说看起来很整洁。仍然愿意接受建议。