jQuery imgAreaSelect hide/show?

Question

He estado tratando de ocultar y mostrar el cuadro de selección imgAreaSelect dependiendo de si una casilla de verificación está marcada o no.

He intentado:

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

pero no parece hacer nada.

he tenido que recurrir a:

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

pero parece un poco engorroso y estoy seguro de que debe haber una mejor manera.

Answer 1

Debe actualizar la instancia después de cambiar las opciones - http://odyniec.net/projects/imgareaselect/usage.html#api-methods. Aunque, en verdad, no estoy seguro de si debería usar {hide: true} o {show: false}.

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

Answer 2

Nunca utilicé imgAreaSeleccionarme, pero en el docs no hay ninguna opción show presente, pero una llamada hide. ¿Has intentado esto?

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

Como BBonifield señala, parece que usted tiene que llamar update() después de cambiar las opciones.

otra posibilidad es utilizar:

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

Esto selecciona todos los div s que tienen una clase que comienza con "imageareaselect-" y los oculta.

Answer 3

No es necesario recuperar una instancia y llamar a los métodos API. Usted puede simplemente:

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

se puede ver el resto de llamadas a métodos aquí (documento oficial): http://odyniec.net/projects/imgareaselect/usage.html

Answer 4

No es una función de selección de cancelar en la API, a fin de utilizarlo como esto:

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

BOOM!

Answer 5

Probé todas las opciones mencionadas aquí. Nada funcionó. Esperaba alguna llamada de API para hacerlo. Pero ninguno de ellos realmente funcionó.

que terminé haciendo manualmente así:

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

Mi estructura de la página es complejo. Esto parece hacer el truco.