javascript - 当您在 iframe 中单击时，如何在 iframe 的父 div 中添加类？

Question

我在一个页面中有四个框架，每个 iframe 都有自己的内容和父 div，其中有一些类

下面是该页面的屏幕截图:

要求:在每个面板中都有一些链接，当您单击这些链接时，它会使用 AJAX 调用其他页面，您可以在第二张图片中看到。

HTML代码如下:

<div class="north-center border">
    <div class="linksDetails">
        <div class="panelLinks">
            <ul>
            <li><a href="javascript:ajaxpage('fxtraders.html', 'panel1');">FX Traders</a></li>
            <li><a href="javascript:ajaxpage('fxcharting.html', 'panel1');">Fx Charting</a></li>
            <!--<li><a href="javascript:ajaxpage('fxbonds.html', 'panel1');">FI Inventory (Bonds)</a></li>-->
            <li><a href="javascript:ajaxpage('fxwatcher.html', 'panel1');">FX RATE WATCHER</a></li>
            </ul>
        </div>
    </div>
    <div class="open-row-box" id="panel1"></div>
</div>

当用户单击任何链接时，链接屏幕将出现在(linksDetails 类)下，然后我在同一个 div 中添加名称为(hidelinks)的新类，并使其不显示

那么，当我单击每个面板顶部的十字图标时，如何隐藏我的内容面板意味着当我单击 iframe 内的那个十字图标时，我只想将 hidelink 类添加到其父 div，这再次隐藏内容 div并再次显示此链接 div。

我只能使用此 jqyery 代码隐藏第一个面板，但不能隐藏每个面板。

J查询代码:

    $(window).load(function(){

// Through this i m adding and removing hide links:

$(".panelLinks a").click(function(){
$(this).parents().eq(2).parent().removeClass("hideLinks");
$(this).parents().eq(2).parent().addClass("hideLinks");
});

// Through this i can only add hidelinks class for first panel only not for each panel seperately:


$("a.close").on('click', function() {
$("#mainFrame", window.parent.document).parent().parent().children().removeClass('hideLinks');
});
});

主要要求:

我如何单独隐藏我的内容面板，就像我单击第一个面板十字图标时它只隐藏第一个面板，当我单击第二个面板时它只隐藏第二个面板？

提前致谢:)

Answer 1

这是获取 iframe 父级的方法

var parent = $(window.frameElement).parent();