Question

我有一个div，它在按下时就像按钮一样。我添加了更改颜色的类，单击该按钮时内部的圆圈向右移动。我想做的是调用一个函数，然后在函数内部更改全局变量并将其传递回去。我也正在使用document.getElementById（“ test”）。innerHTML和第12项更改为第13项来测试代码，反之亦然。但是，变量flag13th不变。它始终具有错误值。

对此有何想法？多谢您的协助。谢谢。

document.getElementById("toggleButton").addEventListener("click", dekatosTritos);

var flag13th = false;

function dekatosTritos() {
  var ThirteenthSalary = document.getElementById("toggleButton").classList;
  if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
    flag13th = false;
    document.getElementById("test").innerHTML = "12th";
  } else {
    flag13th = true;
    document.getElementById("test").innerHTML = "13th";
  }

}

document.getElementById("test11").innerHTML = flag13th;

.toggle-btn {
  display: inline-block;
  position: relative;
  top: 8px;
  width: 60px;
  height: 28px;
  background: gray;
  border-radius: 30px;
}

.toggle-btn .inner-circle {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 80%;
}

.toggle-btn.active {
  background: #4F94CD;
}

.toggle-btn.active>.inner-circle {
  margin-left: 32px;
}

<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
  <div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>

Answer 1

这是一个不使用JavaScript的示例，而是一个input类型的复选框，可以与您的表单一起提交：

.toggler {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.toggler-btn {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 28px;
  border-radius: 28px;
  cursor: pointer;
  background: gray;
  transition: background 0.3s;
}

.toggler-btn:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 100%;
  transition: transform 0.3s;
}

.toggler-label::after {
  content: attr(data-label);
}

/* CHECKED STATES */

.toggler:checked ~ .toggler-btn {
  background: #0bf;
}

.toggler:checked ~ .toggler-btn:after {
  transform: translateX(30px);
}

.toggler:checked ~ .toggler-label::after {
  content: attr(data-labelchecked);
}

<div class="Question_13th">13th Month Salary?</div>

<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>

下面是一个使用JavaScript，classList.toggle()和bool = !bool来切换布尔值的示例

const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;

function dekatosTritos() {
  is13 = !is13;  // Toggle boolean
  EL_btn.classList.toggle('active', is13);
  EL_test.innerHTML = is13 ? "13th" : "12th";
}

EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos();                                 // and on init.

.toggle-btn {
  display: inline-block;
  position: relative;
  top: 8px;
  width: 60px;
  height: 28px;
  background: gray;
  border-radius: 30px;
}

.toggle-btn.active {
  background: #4F94CD;
}

.toggle-btn .inner-circle {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 80%;
}

.toggle-btn.active>.inner-circle {
  margin-left: 32px;
}

<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
  <div class="inner-circle"></div>
</div>
<p id="test"></p>

函数内部的变量

1 个答案: