jQuery imgAreaSelect如何隐藏/显示？

Question

我一直在尝试根据复选框是否被选中来隐藏或显示imgAreaSelect选择框。

我已经尝试过以下方法：

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

但是它似乎没有起到任何作用。

我不得不采取以下措施：

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

但是它看起来有点繁琐，我相信一定有更好的方法。

- Leo

Answer 1

我自己从未使用过imgAreaSelect，但在文档中没有出现show选项，但有一个名为hide的选项。你试过了吗？

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

正如BBonifield指出的那样，似乎在更改选项后必须调用update()。

或者，您可以使用：

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

这将选择所有类名以"imageareaselect-"开头的div元素并将它们隐藏。

- davehauser

---

代码部分8，第二个代码片段ias.setOptions({ show: true });。请访问http://odyniec.net/projects/imgareaselect/usage.html#callback-functions了解更多信息。 - Leo

你的替代方案肯定比我的好！总有一天我会买一本jQuery书来读。 - Leo

是的，刚看到了，似乎是缺少了 update() 调用？ - davehauser

我正在阅读《jQuery实战（第二版）》。我非常愿意推荐这本书。 :-) - davehauser

$('div[class^=imgareaselect-]').hide(); 是我唯一有效的方法。 - Darren

Answer 2

更改选项后，您需要更新实例 - http://odyniec.net/projects/imgareaselect/usage.html#api-methods。但实际上，我不确定您应该使用 { hide: true } 还是 {show: false}。

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

- BBonifield

---

重新显示，我需要使用ias.setOptions({ show: true });由于某种原因，false作为一个值会给出奇怪的、半成品的结果。谢谢！ - Leo

Answer 3

API中有取消选择功能，使用方法如下：

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

爆炸！

- Mc User

Answer 4

我尝试了这里提到的所有选项，但都没有成功。

我本来期望有一些 API 调用可以实现它。但实际上没有一个可行的。

最终我还是手动完成了：

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

我的页面结构很复杂。这似乎起到了作用。

- kheya

Answer 5

您不必获取实例并调用API方法。您可以简单地：

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

您可以在此处查看所有其他方法调用（官方文档）：http://odyniec.net/projects/imgareaselect/usage.html

- xbakesx