javascript - 一次选择一张图像

Question

这是代码:

function select(element){
   element.onclick = function(){
      element.classList.toggle('selected');
  }
}
Array.from(document.getElementsByClassName('my_class_img')).forEach(select);

这是CSS:

.selected{
border: 3px solid blue;
box-sizing: border-box;
}

图像具有相同的名为 my_class_img 的类，一次选择一个 img 怎么办(现在我可以选择多个 img)？谢谢大家!

编辑:使用@epascarello 给我的代码，我的其他函数 (myfun(i)) 不再起作用:

        var src1 = "";
        var img = new Array();
        img[0] = new Image();
        img[0].src = "../images/poggiatesta2.jpg";
        img[1] = new Image();
        img[1].src = "../images/poggiatesta1.JPG";
        img[2] = new Image();
        img[2].src = "../images/poggiatesta3.jpg";
            for (var i = 0; i < img.length; i++) {
            var imagetag = document.createElement("img");
            var onclick = document.createAttribute("onclick");
            onclick.value = "myfun(" + i + ")";

            var sorc = document.createAttribute("src");
            sorc.value = img[i].src;

            var id = document.createAttribute("id");
            id.value = "my_image" + i;

            var clas = document.createAttribute("class");
            clas.value = "my_image_clas";

            imagetag.setAttributeNode(clas);
            imagetag.setAttributeNode(onclick);
            imagetag.setAttributeNode(sorc);
            imagetag.setAttributeNode(id);
            document.body.appendChild(imagetag);
            }
            function myfun(i) {

                src1 = document.getElementById('my_image' + i).src;

            }

Answer 1

跟踪最后选择的或遍历所有元素并删除所选类。

var _last = null;
function select(element){
   element.onclick = function(){
      element.classList.toggle('selected');
      if(_last) _last.classList.remove("selected");
      _last = element.classList.contains("selected") ? element : null;
  }
}

或者使用单选按钮 :)