根据数据属性更改 div 类答案

【问题标题】：change div class based on data-attribute根据数据属性更改 div 类
【发布时间】：2018-04-23 14:50:31
【问题描述】：

我有一个 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 应该加载/更改 iframe 类...因为我有该类的 css

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

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

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

我知道使用 jquery 是可能的，我认为有什么想法吗？

【问题讨论】：

stackoverflow.com/help/mcve
如果 iframe 与父页面在同一个域中，您应该能够访问 iframe 的内容主体，并且您可以在 body 上放置一个类，您可以将您的 css 关闭.虽然我不得不问。你说你有两个 css，这让我怀疑你可能没有使用媒体查询？纵向 vs 横向，你真正关心的是窗口宽度。
不使用媒体，因为有 100 种类型的设备平板电脑和其他比例.. 这种方式是通用的，没有特定媒体
并且没有 iframe 内容与 iframe 元素本身不在同一页面上，我在另一台服务器上使用不同的位置，它提供内容的速度比我的网站服务器快得多。所以就是这样：-s
我没有使用媒体，因为不是为了设备方向，而是对于 iframe 内的内容，它们是横向或纵向开发的，正如我上面所说的，认为游戏，有些是为了适应而开发的肖像一些风景 iframe css 代码完美地包裹了内容，类似于 facebook messenger，但是我的问题是我只能有 1 个 css ......我认为下面的答案解决了我的问题。 ...无论如何，这不是媒体和（方向：??）问题。

标签： javascript jquery css class iframe

【解决方案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 上添加点击事件：

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

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

【讨论】：

【解决方案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>

内嵌框架

<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");
}

第二个链接也一样，或者使用一个类对它们进行分组。

【讨论】：