addclass 和 removeclass jsfiddle 的问题 [关闭]

Question

我正在编写我的第一个脚本来隐藏 iframe 并使用 jquery addclass 和 removeclass 显示它。 我有这个，但我在加载一些 iframe 时遇到了一些问题。

有人可以检查一下js是否正确吗？

$(document).ready(function () {

    $("#dvc-aut").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap dvc-tal");
    });
    $("#dvc-pho").click(function () {
        $(".dvc-aut").removeClass("dvc-spp dvc-spl dvc-tap dvc-tal").addClass("dvc-pho");
    });
    $("#dvc-spp").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spl dvc-tap dvc-tal").addClass("dvc-spp");
    });
    $("#dvc-spl").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-tap dvc-tal").addClass("dvc-spl");
    });
    $("#dvc-tap").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tal").addClass("dvc-tap");
    });
    $("#dvc-tal").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap").addClass("dvc-tal");
    });
});

.div-dvc {
    border: 0px;
    display:inline;
    position:fixed;
    top:0;
}
.btndvc {
    vertical-align: middle;
    border-radius:10px;
    border:0px solid;
    width:35px;
    height:35px;
    background:#A4A4A4;
    z-index:2;
}
.dvc-table {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
}
.dvc-aut {
    display:none;
}
.dvc-pho {
    border-image-slice: 61 24 132 25;
    border-image-width: 61px 24px 132px 25px;
    border-image-outset: 59px 22px 130px 23px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2qddiwy.png");
    width:240px;
    height:320px;
    display:inherit;
}
.dvc-spp {
    border-image-slice: 122 21 125 22;
    border-image-width: 122px 21px 125px 22px;
    border-image-outset: 120px 19px 123px 20px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/1zztlj.png");
    width:320px;
    height:480px;
    display:inherit;
}
.dvc-spl {
    border-image-slice: 21 122 22 125;
    border-image-width:21px 122px 22px 125px;
    border-image-outset: 19px 120px 20px 123px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i61.tinypic.com/2cxszrl.png");
    width:480px;
    height:320px;
    display:inherit;
}
.dvc-tap {
    border-image-slice: 114 96 114 96;
    border-image-width: 114px 96px 114px 96px;
    border-image-outset: 112px 94px 112px 94px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i58.tinypic.com/fwq4bl.png");
    width:767px;
    height:1024px;
    display:inherit;
}
.dvc-tal {
    border-image-slice: 96 114 96 114;
    border-image-width: 96px 114px 96px 114px;
    border-image-outset: 94px 112px 94px 112px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2nc2ag9.png");
    width:1024px;
    height:767px;
    display:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>

<div class="div-dvc">
    <button id="dvc-aut" class="btndvc fa fa-desktop" title="Auto"></button>
    <button id="dvc-pho" class="btndvc fa fa-mobile " title="Old Phone"></button>
    <button id="dvc-spp" class="btndvc fa fa-mobile-phone fa-lg" title="Smartphone Portrait"></button>
    <button id="dvc-spl" class="btndvc fa fa-mobile-phone fa-rotate-90 fa-lg" title="Smartphone Landscape"></button>
    <button id="dvc-tap" class="btndvc fa fa-tablet fa-lg" title="Tablet Portrait"></button>
    <button id="dvc-tal" class="btndvc fa fa-tablet fa-rotate-90 fa-lg" title="Tablet Landscape"></button>
</div>
<br>
<table class="dvc-table">
    <td>
        <p align="center">
            <iframe class="dvc-aut" src="test.html" />
        </p>
    </td>
</table>

jsfiddle: http://jsfiddle.net/AbeAlpha/fpmzf1nx/

或者可能是 html 上的东西？ 我使用相同的 id 和类名，我尝试更改但仍然无法正常工作。 我有点迷茫

我尝试粘贴到 codepen 或 kodtest 等其他在线编辑器中，但没有任何效果。有点难过

Answer 1

您目前有几个问题。 首先，你有一个容器占据了它们的顶部：

.dvc-table {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
}

您可以通过将按钮放在 iframe 包装器上方来解决此问题： .div-dvc {z-index: 2;}

其次，你用

隐藏 iframe

.dvc-aut {
    display:none;
}

但你再也不会显示它了。只需删除它，或将 show() 添加到您的按钮之一。 Here's a fiddle with working buttons.