- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我试过摆弄一些 HTML/JS/CSS但是卡在了如何将翻转开关动态更改为所需状态上。
CSS 来自这里 https://proto.io/freebies/onoff/
function on() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:before";
}
function off() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:after";
}
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span id="innerswitchid" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
然而,这只会让 flipswich 崩溃。如何使用 js 更改组件的 css 将 flipswich 动态更改为所需状态?
最佳答案
将您的代码更新为以下内容:
<button id="js-btn--on">
ON
</button>
<button id="js-btn--off">
OFF
</button>
document.getElementById("js-btn--on").onclick = on;
document.getElementById("js-btn--off").onclick = off;
function on() {
document.getElementById('myonoffswitch').checked = true;
}
function off() {
document.getElementById('myonoffswitch').checked = false;
}
您可以切换复选框,让 CSS 完成它想要完成的工作,而不是混合使用 JS 和 CSS。
关于javascript - 以编程方式更改翻转开关值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34272446/
我想要 angularJs 中的一个按钮,当我按下它时会调用一个函数,当我再次按下它时它会执行另一个功能,比如 ON-OFF 开关。 我有这个: 我会在单击一次时调用另一个函数。 最佳答案 您可
我有一个相当大的 switch 语句(或同样大的 if 语句),我想在 Doxygen 中记录一些方法,可能是调用者图,或者可能是某种流程图格式。 我怎样才能做到这一点? 谢谢 ! 最佳答案 通常 d
public int[] Level1Items(int floor) { switch (floor) { case 0: case 1:
我有一些R代码看起来基本上是这样的: compute.quantiles <- function(mu, type) { ## 'mu' and 'type' are vectors of the
嗨,我正在尝试处理 ajax json 响应 这是我的代码 success: function (j) { switch(true) { case (j.cho
我在尝试在 Javascript 中进行切换时遇到问题,当切换激活时,根据情况,程序将显示许多新按钮,您可以单击这些按钮并播放声音。 这是我的 HTML 和 Javascript,带有第一组按钮: f
static double rSetzen(){ double r; System.out.println("Sind sie männlich oder weiblich?");
作为我用 Haskell 编写的迷你解释器的一部分,我正在编写一个执行以下操作的函数:如果是 eval (App e1 e2) ,我想递归评估 e1 ( eval e1 ),将结果设置为 v1 .然后
对于C语言,我知道我很接近,但是对于输入的任何字符,打印输出都是“辅音”。我的 switch case 语句有什么问题。我需要 if 语句吗? #include #include int main
我有以下方法,它以类的类型作为参数: public void test(Type proType){ } 我目前有一个很大的 if else 看起来像: if(proType == typeof(Cl
我正在编写带有开关功能的代码。我希望我的默认代码打印“错误”并使程序停止运行。我应该在默认值末尾添加 return 1; 吗? 如果是这样,这样对吗? switch (course3) { c
VB.NET,但 C# 也可以。 我有一个 MustInherit 基类和 170 个基于它的继承类。为什么这么多?因为每个继承的类在 Sub New() 中做了不同的事情。继承的类型不添加任何新属性
在我的开关中,我希望案例从 0 变为 (number_of_cases-1),而无需自己编写数字。因此,如果我在中间删除一个 case block ,则以下 case 将重新编号(减 1),以便再次从
我想在我的应用中使用精确的 Material 开关。正是谷歌设计指南中的那些。 https://www.google.com/design/spec/components/selection-cont
有没有比我使用的更好的方法来实现切换/开关。它有效,但对我来说似乎很笨拙。 var foo = true; $(document).on("click","$element",function(){
我尝试将全局变量与 switch 语句一起使用,但变量的值没有改变。也许是范围问题? 我需要一个 switch 语句来逐一循环遍历每种情况,但每次我在控制台中查看时,“i”变量都会重置为 1。 为什么
我最近在一个网站上工作,在本地主机上一切正常,但是当我将它移到服务器上时,更改 div 函数开始加载怪异,我不知道为什么。当您循环浏览投资组合按钮和联系人按钮时,该错误会更加明显。 该网站仅针对 Fi
我一直在开发一个使用 switch() 函数的项目,如下所示: switch (selectedMenu) { case 1: switch (selectedIndex) {
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Variable declaration in c# switch statement 我一直想知道: 当我
我有一个奇怪的问题,我似乎无法解决。我有相当复杂的代码,但我已经简化了它,问题仍然存在。 请参阅以下内容: 'correct'); switch (true) { case empty($m
我是一名优秀的程序员,十分优秀!