我如何添加html打开/关闭翻转开关到jquery
How can I add html on/off flip switch to jquery?
我试图使用html/css与我的jquery,但不能让它工作。到目前为止,当我单击与"vlabe"匹配的div时,它将根据状态打开或关闭。然而,我正试图使用一个html/css打开/关闭开关从原型。但是我不能让它工作。
作为现在,如果我有<div id='light'></div>
,它将显示"开"或"关"取决于状态。我需要将"checked"添加/删除到<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="" checked>
switchclick='';
if (vdata == 'Off' ) {
switchclick = 'onclick="SwitchToggle('+item.idx+', ''On'');"';
vdata = 'Off';
} else {
switchclick = 'onclick="SwitchToggle('+item.idx+', ''Off'');"';
vdata = 'On';
}
if( SwitchType == 'On/Off') {
// code to be executed if condition is true
$('#'+vlabel).html('<div '+switchclick+' >'+vdata+'</div>');
}
我希望我解释了我自己和我想做什么,如果没有,请让我知道,不要否决我的投票。我正在努力。:)
完整的脚本供参考。
function RefreshData()
{
clearInterval($.refreshTimer);
var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
$.getJSON(jurl,
{
format: "json"
},
function(data) {
if (typeof data.result != 'undefined') {
$.each(data.result, function(i,item){
for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
if( $.PageArray[ii][0] === item.idx ) { // Domoticz idx number
var vtype= $.PageArray[ii][1]; // Domotitcz type (like Temp, Humidity)
var vlabel= $.PageArray[ii][2]; // cell number from HTML layout
var vdesc= $.PageArray[ii][3]; // description
var vattr= $.PageArray[ii][4]; // extra css attributes
var valarm= $.PageArray[ii][5]; // alarm value to turn text to red
var SwitchType= item.SwitchType; // Switch type "Dimmer""On/Off" "ECT"
var vdata= item[vtype]; // current value
//For Dimmers, if a Dimmer is "off it shows off, If on it shows the percent with a %"
if (item.Status == 'Off'){
DimmerLVL = 'Off';
} else {
DimmerLVL = (+item.Level+ '%');
}
// create switchable value when item is switch
switchclick='';
if (vdata == 'Off' ) {
switchclick = 'onclick="SwitchToggle('+item.idx+', ''On'');"';
vdata = 'Off';
} else {
switchclick = 'onclick="SwitchToggle('+item.idx+', ''Off'');"';
vdata = 'On';
}
if( SwitchType == 'On/Off') {
// code to be executed if condition is true
$('#'+vlabel).html('<div '+switchclick+' >'+vdata+'</div>');
} else if (SwitchType == 'Dimmer') {
// code to be executed if condition is false
$('#'+vlabel).html('<div>'+DimmerLVL+'</div>');
} else {
// code to be executed if condition is false
$('#'+vlabel).html('<div>123'+vdata+'</div>');
}
// scene alle verlichting uit: http://192.168.0.100:8080/json.htm?type=command¶m=switchscene&idx=2&switchcmd=ON
// if extra css attributes. Make switch not switchable when it is protected.
$('#desc_'+vlabel).html(vdesc);
}
}
});
}
});
$.refreshTimer = setInterval(RefreshData, 8000);
}
$(document).ready(function() {
$.roomplan=2; // define roomplan in Domoticz and create items below.
$.domoticzurl="http://192.168.1.125:8080";
//format: idx, value, label, description, [override css], [alarm value]
$.PageArray = [
['4', 'Status', 'cell6', 'Lamp',],
['2', 'Status', 'cell7', 'TV',],
];
RefreshData();
});
function SwitchToggle(idx, switchcmd)
{
console.log('function called');
$.ajax({
url: "http://192.168.1.125:8080/json.htm?type=command¶m=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=Level",
async: false,
dataType: 'json',
success: function(){
console.log('SUCCES');
},
error: function(){
console.log('ERROR');
}
});
RefreshData();
}
这对你有用吗?
$('#light').on('click', function() {
var state = $('#light').html();
var $checkbox = $('.onoffswitch-checkbox');
$('#light').html(state == 'Off' ? 'On' : 'Off');
$checkbox.prop('checked', !$checkbox.prop('checked'));
})
#light {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The checkbox:
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="" checked>
<br>
<br>Click the red div, The switch is:
<div id="light">On</div>
我不完全确定我是否正确回答这个问题,但从我的理解你想要删除属性检查?他们有相关文档在http://api.jquery.com/prop/
简洁:关于布尔属性,考虑一个由HTML标记定义的DOM元素,并假设它位于一个名为elem的JavaScript变量中:$(elem)。Attr ("checked") (1.6.1+)"checked" (String)会随着复选框的状态而改变
所以我用了一种肮脏的方式,添加了
<div class="onoffswitch"><input '+switchclick+' type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" '+vdata+' ><label class="onoffswitch-label" for="myonoffswitch"><span class="onoffswitch-inner"></span><span class="onoffswitch-switch"></span> </label></div>
$('#'+vlabel).html('');
整行代码看起来像这样
$('#'+vlabel).html('<div class="onoffswitch"><input '+switchclick+' type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" '+vdata+' ><label class="onoffswitch-label" for="myonoffswitch"><span class="onoffswitch-inner"></span><span class="onoffswitch-switch"></span> </label></div>');
我知道这是一个肮脏的方式来做这件事,但它似乎工作现在:(
感谢所有试图帮助的人:)
相关文章:
- 通过点击按钮翻转缩略图
- AngularJS ng开关或类似的动态值工作
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 基于下拉菜单创建开关
- Javascript开关不工作
- 引导开关不工作
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 如何定义星期日和平日.按日期使用开关
- CSS3卡翻转动画,检测是否不支持
- Javascript-使用“”将toDateStringMonth从文本字符串解析为数字字符串;如果“;vs“;开关”;
- 如何将事件处理程序分配给proto.io开关
- Jquery Mobile 中的翻转开关出错
- 根据代码创建翻转开关
- 更改翻转切换开关中的文本,jQuery Mobile
- 使用 JavaScript 翻转开关
- Jquery移动翻转开关从两个按钮中至少选择一个
- 如何从代码更改 jquery 移动翻转开关状态
- JQM后来预先设置的翻转开关没有对事件作出反应
- 如何仅在手动切换翻转开关时触发事件
- 我如何添加html打开/关闭翻转开关到jquery