Question

我有一个iframe和2个css代码，一个代表横向代码用于纵向代码，但不适用于设备纵向或横向代码，而不是iframe中加载的内容。以横向模式设计的游戏与以纵向模式设计的游戏相比。

我有2套css，如果我启用它们就可以正常工作但是我想添加相同的按钮，因为是1个通用div触发游戏弹出iframe根据某些数据属性示例加载iframe css

<a href="mygamelink" target="iframe" data="portrait">click me to play</a>

如果我点击上面的链接iframe应加载/更改iframes类...因为我有该类的CSS

<a href="mygamelink" target="iframe" data="landscape">click me to play</a>

如果我点击上面的链接iframe应加载/更改iframes类...因为我有该类的CSS

<iframe class="portrait/landscape" name="iframe"></a>

我知道jquery有可能我认为有什么想法吗？

Answer 1

<强> Working fiddle

链接应具有data-*属性，例如：

<a href="mygamelink" target="iframe" data-format="portrait" class="iframe_link">click me to play</a>
<a href="mygamelink" target="iframe" data-format="landscape" class="iframe_link">click me to play</a>

然后通过common属性（我的示例中的类iframe_link）在hrefs上添加click事件：

$('.iframe_link').on('click', function(e){
    e.preventDefault();

    $('[name="iframe"]').attr('class', ( $(this).data('format') ));
})

Answer 2

链接

<a id="first-link" href="mygamelink" target="iframe" data-display="portrait">click me to play</a>
<a id="second-link" href="mygamelink" target="iframe" data-display="landscape">click me to play</a>

I帧

<iframe id="my-iframe" class="portrait/landscape" name="iframe"></a>

使用jQuery设置iframe的类：

var display = $("#first-link").data("display");
if(display === "portrait") {
    $("#my-iframe").addClass("portrait");
} else {
    $("#my-iframe").addClass("landscape");
}

第二个链接相同或使用类对它们进行分组。

根据数据属性

2 个答案: