jQuery imgAreaChọn ẩn/hiện?

Question

Tôi đã cố gắng ẩn và hiển thị hộp chọn imgAreaSelect tùy thuộc vào việc hộp kiểm có được chọn hay không.

Tôi đã thử:

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

nhưng nó dường như không làm gì cả.

tôi đã phải dùng đến:

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

nhưng có vẻ như một chút rườm rà và tôi chắc chắn phải có một cách tốt hơn.

Answer 1

Bạn cần cập nhật cá thể sau khi bạn thay đổi các tùy chọn - http://odyniec.net/projects/imgareaselect/usage.html#api-methods. Mặc dù trong sự thật, tôi không chắc bạn có nên sử dụng {hide: true} hay {show: false}.

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

Answer 2

Tôi chưa bao giờ sử dụng imgAreaChọn bản thân mình, nhưng trong docs không có tùy chọn show hiện tại, nhưng có tên hide. Bạn đã thử cái này chưa?

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

Như BBonifield chỉ ra, có vẻ như bạn phải gọi update() sau khi thay đổi tùy chọn.

Hoặc bạn có thể sử dụng:

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

này sẽ chọn tất cả div s mà có một lớp học bắt đầu bằng "imageareaselect-" và giấu chúng.

Answer 3

Bạn không cần phải lấy lại cá thể và gọi các phương thức API. Bạn có thể chỉ đơn giản là:

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

Bạn có thể xem tất cả các phương pháp khác gọi đây (tài liệu chính thức): http://odyniec.net/projects/imgareaselect/usage.html

Answer 4

Có một hủy chức năng lựa chọn trong API, vì vậy sử dụng nó như thế này:

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

BOOM!

Answer 5

Tôi đã thử tất cả các tùy chọn được đề cập ở đây. Không có gì hiệu quả. Tôi mong đợi một số cuộc gọi api để làm điều đó. Nhưng không ai trong số họ thực sự làm việc.

tôi đã kết thúc làm bằng tay như thế này:

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

cấu trúc trang của tôi rất phức tạp. Điều này dường như làm các trick.