时间戳

首页 > 解决方案 > 需要使用切换更改复选框

javascript - 需要使用切换更改复选框

问题描述

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

 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';
}

即使我将其切换到关闭状态，也始终启用类。没有禁用类。我需要在打开时启用类，在关闭时禁用类。请帮我解决这个问题。

标签： javascriptjquerytoggle

解决方案

在逻辑部分，我使用了 ^ 运算符，它代表 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()">

推荐阅读