根據數據屬性更改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

工作提琴 。

鏈接應具有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>

然后，通過共同的屬性（類的HREFs添加click事件iframe_link在我的例子）：

$('.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>

iframe

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

對於第二個鏈接相同，或使用類將它們分組。