多个事件的布尔if语句是纯JavaScript

Question

我遇到布尔flag的问题。

如果只有一个按钮没有问题，但是有多个按钮会有问题。首次点击后，flag的值为false。但是要更改第二个按钮的箭头，需要flag值true值......等等......

请一个接一个地点击每个按钮，看看我的意思。

我该如何解决这个问题？

  var btn = document.querySelectorAll('.cdi-link');
  var flag = true;

  for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function(){
      var button = this;
      var arrow = button.lastElementChild.lastElementChild;

      if (flag) {
        flag = false;
        arrow.innerHTML = '&#9660;';
        console.log(flag);
      } else {
        flag = true;
        arrow.innerHTML = '&#9654;';
        console.log(flag);
      }
    });
  }

          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

Answer 1

您可以使用为if '4' in y_str: z += 1 continue 创建自己范围的函数在标志上使用闭包。

＆＃13;

＆＃13;

flag

＆＃13;

var btn = document.querySelectorAll('.cdi-link');

for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function (flag) {
        return function () {
            var button = this;
            var arrow = button.lastElementChild.lastElementChild;

            if (flag) {
                flag = false;
                arrow.innerHTML = '&#9660;';
                console.log(flag);
            } else {
                flag = true;
                arrow.innerHTML = '&#9654;';
                console.log(flag);
            }
        };
    }(true)); // start value for flag
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将状态与每个按钮相关联，或者在这种情况下，您只需切换一个类。

＆＃13;

＆＃13;

var btn = document.querySelectorAll('.cdi-link');
  for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function() {
      this.classList.toggle('cdi-link--open');
    });
  }

＆＃13;

.cdi-link .arrow::after {
  content: "▲";
 }
 
 .cdi-link--open .arrow::after {
  content: "▼";
 }

＆＃13;

<button type="button" class="cdi-link">
    <div>
      <span>click to change the arrow</span> <span class="arrow"></span>
    </div>
  </button>

  <button type="button" class="cdi-link">
    <div>
      <span>click to change the arrow</span> <span class="arrow"></span>
    </div>
  </button>

  <button type="button" class="cdi-link">
    <div>
      <span>click to change the arrow</span> <span class="arrow"></span>
    </div>
  </button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一种解决方案是使用flag

在每个按钮中存储个人this.flag

var btn = document.querySelectorAll('.cdi-link');


  for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function(){
      var button = this
      var arrow = button.lastElementChild.lastElementChild;
      
      if (this.flag) {
        this.flag = false;
        arrow.innerHTML = '&#9654;';
      } else {
        this.flag = true;
        arrow.innerHTML = '&#9660;';
      }
      console.log("Flag = " + this.flag);
    });
  }

<button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

Answer 4

保持简单，并将属性直接放在元素上（因为您无论如何只是存储原始数据）。请确保给它起一个不太可能与其他代码相混淆的名称。

＆＃13;

＆＃13;

  var btn = document.querySelectorAll('.cdi-link');

  for (var i = 0; i < btn.length; i++) {
    btn[i].__my_flag__ = true;
    btn[i].addEventListener('click', function(){
      var button = this;
      var arrow = button.lastElementChild.lastElementChild;

      if (button.__my_flag__) {
        button.__my_flag__ = false;
        arrow.innerHTML = '&#9660;';
        console.log(button.__my_flag__);
      } else {
        button.__my_flag__ = true;
        arrow.innerHTML = '&#9654;';
        console.log(button.__my_flag__);
      }
    });
  }

＆＃13;

          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

＆＃13;

＆＃13;

＆＃13;

即使在旧浏览器中，这也是内存安全的，并且使用比闭包解决方案更少的内存开销，实际上 做 有时在旧浏览器中存在内存泄漏问题。

Answer 5

您可以使用IIFE（立即调用函数表达式）。 在IIFE中声明flag以在for循环的每次迭代中创建自执行块。请尝试以下方法：

＆＃13;

＆＃13;

var btn = document.querySelectorAll('.cdi-link');

for (var i = 0; i < btn.length; i++) {
  (function(){
    var flag = true;
    btn[i].addEventListener('click', function(){
      var button = this;
      var arrow = button.lastElementChild.lastElementChild;

      if (flag) {
        flag = false;
        arrow.innerHTML = '&#9660;';
        console.log(flag);
      } else {
        flag = true;
        arrow.innerHTML = '&#9654;';
        console.log(flag);
      }
    });
  })();
}

＆＃13;

<button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>
          
    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

    <button type="button" class="cdi-link">
      <div>
        <span>click to change the arrow</span> <span class="arrow">&#9654;</span>
      </div>
    </button>

＆＃13;

＆＃13;

＆＃13;