Question

Iam使用代码在锚标记中显示启用禁用功能

 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，则true或false只是一个比特而已。

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()">

需要使用切换更改复选框

1 个答案: