Question

初学者。
我有一个小图库，有两个用CSS声明的类：
imagem ：所选图片，带边框
imagem-activa ：所有其他人，没有边框

当用户点击一张图片时，如何使用JavaScript添加/删除类？我已经知道如何在jQuery中做到这一点，但也想学习纯JS。

HTML

     <div class="exercicio">
        <h2 class="titulo">
            Exercício 4
        </h2>
        <img src="img/imagem1.jpg" class="imagem imagem-activa" />
        <img src="img/imagem2.jpg" class="imagem" />
        <img src="img/imagem3.jpg" class="imagem" />
        <img src="img/imagem4.jpg" class="imagem" />

    </div>

CSS

.imagem{border:5px solid #000;opacity:0.5;cursor: pointer;}
.imagem-activa{border:5px solid #ff0066;opacity:1;}

JS
这部分我无法使其发挥作用。有人能帮助我吗？

    var imagens = document.getElementsByClassName("imagem");
    var imagemActual = 0;
    for(var i = 0; i < imagens.length; i++) {
      imagens[i].addEventListener("click", function() {
          imagens[imagemActual].classList.remove("imagem-activa");
          this.classList.add("imagem-activa");
          imagemActual = i;
      });
    }

这是我正在使用的 jQuery 解决方案

    $(".imagem").click(function() {
      $(".imagem").removeClass("imagem-activa");
      $(this).addClass("imagem-activa");
    });

Answer 1

所以，这里发生的事情是，无论何时调用任何点击处理程序，您的变量imageActual都会设置为i的当前值，该值始终为4，因为这是最终值在for循环之后i对于第一次单击，您可能不会遇到任何错误，您可能会得到预期的结果。但是，只要您的任何事件侦听器都运行，imagemActual的值将为4，这将导致在将来调用事件侦听器时出现错误，因为imagens[4]将是未定义的。

有几种方法可以解决这个问题。

1） bind

您可以将循环内的i的（临时）值绑定到事件侦听器函数：

var imagens = document.getElementsByClassName("imagem");
var imagemActual = 0;
for(var i = 0; i < imagens.length; i++) {
  imagens[i].addEventListener("click", function(index) {
      imagens[imagemActual].classList.remove("imagem-activa");
      this.classList.add("imagem-activa");
      imagemActual = index;
  }.bind(imagens[i], i));
}

.imagem {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.imagem.imagem-activa {
  background-color: red;
}

<div class="exercicio">
    <h2 class="titulo">
        Exercício 4
    </h2>
    <img src="" class="imagem imagem-activa" />
    <img src="" class="imagem" />
    <img src="" class="imagem" />
    <img src="" class="imagem" />
</div>

2） let

如果您可以使用ES6，则可以使用let，这将确保您的计数变量是应用的每个值的唯一实例：

const imagens = document.getElementsByClassName("imagem");
let imagemActual = 0;
for(let i = 0; i < imagens.length; i++) {
  imagens[i].addEventListener("click", function() {
      imagens[imagemActual].classList.remove("imagem-activa");
      this.classList.add("imagem-activa");
      imagemActual = i;
  });
}

.imagem {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.imagem.imagem-activa {
  background-color: red;
}

<div class="exercicio">
    <h2 class="titulo">
        Exercício 4
    </h2>
    <img src="" class="imagem imagem-activa" />
    <img src="" class="imagem" />
    <img src="" class="imagem" />
    <img src="" class="imagem" />
</div>

图片库：点击图片时如何删除和添加课程

1 个答案: