需要改变复选框的切换方式。

Question

我正在使用一段代码来显示锚标签的启用和禁用功能。

 app_tile += '               ' + (enabled ? ('<a href="#" class="enabled"><i class="fa fa-check"></i>Enabled</a>\n') : ('<a href="#" class="disabled"><i class="fa fa-times"></i> Disabled</a>\n'));

我想用一个拨杆来代替它，即

<div class="checkbox-container">
    <input type="checkbox" id="cb1">
    <label class="checkmark" for="cb1"></label>
   </div>

我已经用作为

 app_tile += '               ' + (enabled ? ('<a href="#" class="enabled"><div class="slider-container"> <input type="checkbox" id="'+ app_name +'" checked> <label class="slider"  for="'+ app_name +'"></label> <div class="status"></div> </div></a>') : ('<a href="#" class="disabled"><div class="slider-container"> <input type="checkbox" id="'+ app_name +'"> <label class="thy-slider"  for="'+ app_name +'"></label> <div class="thy-status"></div> </div></a>'));

我有一个像$(document).on('click', "a.enabled, a.disabled", changeAppStatus)这样的函数调用。

function changeAppStatus(e) {
        var app = $(e.target).parents('.oidapp');
        var status = $(e.target).hasClass('enabled') ? 'disable' : 'enable';
}

总是得到类为启用，即使我把它切换到关闭.没有得到禁用类。我需要在开启时得到启用类，在关闭时得到禁用类，请帮我解决这个问题。

Answer 1

在逻辑部分，我使用了^运算符，它代表XOR运算。

请记住，真或假是一个单一的位，如果我们记得XOR。

1 ^ 1 = 0 1 ^ 0 = 1 0 ^ 1 = 1 0 ^ 0 = 0

//------------- Logic ------------
let enable = false //This variable has to be outside the method.

function Logic(){
  
  const square = document.getElementById("square")
  
  if(enable){
    square.classList.remove('enable')
    square.classList.add('disabled')
  } else {
    square.classList.remove('disabled')
    square.classList.add('enable')
  }
  
  enable ^= true
  
}

//------------- ToggleClass ------------
function Toggle(){
  
  const square = document.getElementById("square2")
  
  square.classList.toggle("enable");
  
}

.square{
  height: 50px;
  width: 50px;
}

.disabled{
  background-color: #555;
}

.enable{
  background-color: green!important
}

<br> With logic:
<div class="square disabled" id="square"></div>

<input type="checkbox" onclick="Logic()">

<br> With toggle class:
<div class="square disabled" id="square2"></div>

<input type="checkbox" onclick="Toggle()">