普通的JavaScript布尔标志不起作用。为什么？

Question

hi，

谁能告诉我为什么每次我单击"黄色按钮"控制台日志显示我的值false？(每次点击之后，都应交替为错误的右错误权利等(

错误在哪里？

var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    var button = this;
    var arrow = button.lastElementChild.lastElementChild;
    var btnColor = button.lastElementChild;
    var flag = true;
    if (flag) {
      flag = false;
      console.log(flag);
    } else {
      flag = true;
      console.log(flag);
    }
  });
}

<section class="cursos-de-ingles">
  <article class="main-cdi">
    <div class="cdi cdi-one">
      <div class="cdi-header">
        <img src="img/numero1.png" alt="">
      </div>
      <div class="cdi-par">
        
        <button type="button" class="cdi-link">
      <div>
        <span>Ver detalles de cursos de Inglés General</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
      </div>
      <!--cdi-par-->
      <img src="img/greybox.png" alt="">
    </div>
    <!--cdi-one-->
    
    <div class="cdi cdi-two">
   
    
        <button type="button" class="cdi-link">
      <div>
        <span>Ver detalles de los cursos de Inglés Académico</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
      </div>
      <!--cdi-par-->
      <img src="img/greybox.png" alt="">
    <!--cdi-two-->
    <div class="cdi cdi-three">
      <div class="cdi-header">
        
      </div>
      <div class="cdi-par">
        
        <button type="button" class="cdi-link">
      <div>
        <span>Ver detalles de los cursos individuales</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
      </div>
      <!--cdi-par-->
      <img src="img/greybox.png" alt="">
    </div>
    <!--cdi-three-->

Answer 1

将标志移到EventListener和循环外，因为在每次点击或循环中，您都会将标志设置为true。

var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
var flag = true;
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    var button = this;
    var arrow = button.lastElementChild.lastElementChild;
    var btnColor = button.lastElementChild;
    if (flag) {
      flag = false;
      console.log(flag);
    } else {
      flag = true;
      console.log(flag);
    }
  });
}

但是，如果您想要一个不同的单击标志，请使用地图：

var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
var flags = {};
for (var i = 0; i < btn.length; i++) {
   btn[i].addEventListener('click', function() {
      var button = this;
      var arrow = button.lastElementChild.lastElementChild;
      var btnColor = button.lastElementChild;
      if (flag[i]) {
         flag[i] = false;
         console.log(flag[i]);
      } else {
         flag[i] = true;
         console.log(flag[i]);
      }
  });
}

Answer 2

这是因为当点击发生时，标志始终设置为true，因此它将自己设置为false。标志的声明应在点击处理程序之外移动。