javascript - 根据数据属性更改 div 类

Question

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

我有 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>

然后通过公共(public)属性(在我的示例中为类 iframe_link)在 hrefs 上添加一个点击事件:

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

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