Question

我已经学会了我想分享的有趣的事情，

请参阅以下代码

<div id="myDiv">
    <cq:include resourceType="foundation/components/parsys" path="par"/>
</div>

我们将parsys组件包含在我们自己的Div中。所以当我们做的时候

$('#myDiv').hide();

我们可以预期也会隐藏它们，但它不会发生。

为什么？我们如何隐藏这个解析？

Answer 1

我们需要了解的一件事是，如果我们需要获取任何CQ相关组件。我们需要使用CQ提供的WCM API。

如果我们在我们的解析中检查F12我们的组件＆＃34; par＆＃34;在我们的分析符下方，您会看到<script>标记。

例如，

CQ.WCM.edit({"path":"/content/mycompany/jcr:content/par/modal/modal-parsys","type":"foundation/components/parsys","csp":"pageComponent|page/par|parsys/modal|parbase/modal-parsys|parsys","isContainer":true});

请参阅路径：＆＃34; / content / mycompany / jcr：content / par / modal / modal-parsys＆＃34; 属性这是内容的位置，此处也称为<存储库中的strong>可编辑。

这用作＆＃34; Div ID＆＃34;找到CQ中的parsys，dialobox或任何内容。

我们使用以下代码隐藏组件。

var parsysComp = CQ.WCM.getEditable('/content/mycompany/jcr:content/par/modal/modal-parsys');
if(parsysComp) // checking if Exists
{
    parsysComp.hide();
}

实用信息 如果你将这段代码粘贴在$（document）.ready或$（window）.ready中，这就不行了，因为在DOM准备好并且独立于窗口之后CQ组件被加载很多。

所以说如果你想在页面的onload上隐藏一个parsys，那么把上面的代码放在

中

CQ.WCM.on('editablesready', function() {
    // Hiding parsys/editable code goes here
});

如果要在设计模式下隐藏parsys编辑栏，请转到设计模式。检查（F12）并在设计模式中查找路径值。它可能是

/etc/designs/default/jcr:content/pageComponent/par/modal/modal-parsys

所以要获得可编辑的代码

CQ.WCM.getEditable('/etc/designs/default/jcr:content/pageComponent/par/modal/modal-parsys
');

参考文献：

CQ WCM API docs

Reference Link 2

如何隐藏CQ5中的parsys组件？

1 个答案: