нужно поменять чекбокс с переключателем - PullRequest
Новая
       13

нужно поменять чекбокс с переключателем

0 голосов
/ 23 апреля 2020

Я использую код для отображения функции включения и отключения в теге привязки 

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

Я хочу заменить его на переключатель ie 

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

у меня есть вызов с функцией finction, например, $ (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';
}

всегда получая класс как включено, даже если я переключаю это в off.Not получить отключить класс. Мне нужно, чтобы включить класс при включении и отключить класс, когда он выключен. Пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 23 апреля 2020

В части logi c я использовал оператор ^, который представляет операции XOR.

Помните, что true или false - это один бит, если мы помним 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()">
...