Question

我正在尝试将html / css与我的jquery一起使用，但无法让它工作。现在，当我点击匹配＆＃34; vlabe＆＃34;的div时它将根据状态打开或关闭。但我试图使用proto.io的html / css开/关切换，但我无法让它工作。

现在，如果我有<div id='light'></div>，它将显示＆＃34; On＆＃34;或者＆＃34;关闭＆＃34;取决于国家。我需要添加/删除＆＃34;检查＆＃34;到<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&param=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&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=Level",
        async: false, 
        dataType: 'json',
        success: function(){
        console.log('SUCCES');
        },
        error: function(){
        console.log('ERROR');
        }
    });
    RefreshData();
    }

Answer 1

我不完全确定我是否正确回答了这个问题，但据我所知，您要删除所检查的属性？他们在http://api.jquery.com/prop/

上有相关文档

为简洁起见：

关于布尔属性，请考虑由HTML标记定义的DOM元素，并假设它位于名为elem的JavaScript变量中：

$（elem）.attr（＆＃34;已检查＆＃34;）（1.6.1 +）＆＃34;已检查＆＃34; （字符串）将随复选框状态

而变化

Answer 2

这对你有用吗？

＆＃13;

$('#light').on('click', function() {
  
  var state = $('#light').html();
  var $checkbox = $('.onoffswitch-checkbox');

  $('#light').html(state == 'Off' ? 'On' : 'Off');

  $checkbox.prop('checked', !$checkbox.prop('checked'));
})

＆＃13;

#light {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 3

所以我通过添加

来做到这一点

$('#'+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>');

到

indices

整行代码看起来像这样

indices( numpy.array([[1, 2, 3], [2, 3, 4]]) )

我知道这是一种肮脏的方式，但它似乎现在有用:(

感谢所有试图提供帮助的人：）

如何将html开/关翻转开关添加到jquery？

3 个答案: