選擇一個圖像在時間

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; 
    } 
} 

或者使用單選按鈕:)

Answer 2

我會做這樣的，並使用腳本跳過。

input { 
 
    display: none 
 
} 
 

 
input:checked ~ img { 
 
    border: 3px solid blue; 
 
    box-sizing: border-box; 
 
}

<label> 
 
    <input type='radio' name='sel_img'> 
 
    <img src='http://placehold.it/100/100'> 
 
</label> 
 
<label> 
 
    <input type='radio' name='sel_img'> 
 
    <img src='http://placehold.it/100/100'> 
 
</label> 
 
<label> 
 
    <input type='radio' name='sel_img'> 
 
    <img src='http://placehold.it/100/100'> 
 
</label> 
 
<label> 
 
    <input type='radio' name='sel_img'> 
 
    <img src='http://placehold.it/100/100'> 
 
</label>