addclass 和 removeclass jsfiddle 的问题
Problems with addclass and removeclass jsfiddle
我正在执行我的第一个脚本,用于隐藏 iframe 并使用 jquery 添加 class 和删除 class 显示它。
我有这个,但我在加载一些 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 和 class 名称,我尝试更改但仍然无效。
我有点迷茫
我尝试粘贴其他在线编辑器,如 codepen 或 kodtest,但没有任何效果。我有点难过
你现在的东西有几个问题。
首先你有一个容器占据了整个显示,在它们的顶部:
.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.
我正在执行我的第一个脚本,用于隐藏 iframe 并使用 jquery 添加 class 和删除 class 显示它。 我有这个,但我在加载一些 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 和 class 名称,我尝试更改但仍然无效。 我有点迷茫
我尝试粘贴其他在线编辑器,如 codepen 或 kodtest,但没有任何效果。我有点难过
你现在的东西有几个问题。 首先你有一个容器占据了整个显示,在它们的顶部:
.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.