jQuery imgAreaSelect hide/show?

问题

I've been trying to hide and show the imgAreaSelect selection box depending on whether a checkbox is checked or not.

I've tried:

    var ias = $('#photo').imgAreaSelect({ instance: true });
    ias.setOptions({ show: false });

but it doesn't seem to do anything.

I have had to resort to:

    $('div.imgareaselect-selection').hide();
    $('div.imgareaselect-border1').hide();
    $('div.imgareaselect-border2').hide();
    $('div.imgareaselect-border3').hide();
    $('div.imgareaselect-border4').hide();
    $('div.imgareaselect-handle').hide();
    $('div.imgareaselect-outer').hide();

but it seems a little cumbersome and I'm sure there must be a better way.

回答1:

You need to update the instance after you change the options - http://odyniec.net/projects/imgareaselect/usage.html#api-methods . Although in truth, I'm not sure if you should be using { hide: true } or {show: false}.

var ias = $('#photo').imgAreaSelect({ instance: true });
ias.setOptions({ hide: true });
ias.update();

回答2:

I never used imgAreaSelect myself, but in the docs there is no option show present, but one named hide. Did you try this?

var ias = $('#photo').imgAreaSelect({ instance: true });
ias.setOptions({ hide: true });
ias.update();

As BBonifield points out, it seems like you have to call update() after changing options.

Alternatively you could use:

$('div[class^=imgareaselect-]').hide();

This selects all divs which have a class that begins with "imageareaselect-" and hides them.

回答3:

There is a cancel selection function in the API, so use it like this:

var ias = $('#photo').imgAreaSelect({ instance: true });
ias.cancelSelection();

BOOM!

回答4:

You don't have to get an instance back and call the API methods. You can simply:

var ias = $('#photo').imgAreaSelect({ hide: true });

You can see all other method calls here (official documentation): http://odyniec.net/projects/imgareaselect/usage.html

回答5:

I tried all of the options mentioned here. Nothing worked. I expected some api call to do it. But none of them actually worked.

I ended up doing manually like this:

$(".imgareaselect-selection").hide();
$(".imgareaselect-outer").hide();
$(".imgareaselect-border1").hide();
$(".imgareaselect-border2").hide();

My page structure is complex. This seems doing the trick.

来源：https://stackoverflow.com/questions/3709633/jquery-imgareaselect-hide-show