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

但似乎有点麻烦，我相信一定有更好的方法。

Answer 1

更改选项后，您需要更新实例 - 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();

Answer 2

我自己从未使用imgAreaSelect，但在docs中没有选项show，但有一个名为hide。你试过这个吗？

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

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

或者你可以使用：

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

这将选择所有具有以“imageareaselect-”开头的类的div并隐藏它们。

Answer 3

API中有取消选择功能，因此请使用它：

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

BOOM！

Answer 4

您不必返回实例并调用API方法。你可以简单地说：

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

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

Answer 5

我尝试了这里提到的所有选项。没有任何效果。我期待一些api电话去做。但它们都没有真正起作用。

我最终像这样手动做了：

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

我的页面结构很复杂。这似乎可以解决问题。

jQuery imgAreaSelect hide / show？

5 个答案: