從數組中選擇僅顯示一次的圖像

Question

我正在嘗試向用戶呈現圖片，他們可以選擇一張並添加到表格中。這很好，但是當我嘗試將另一個圖像添加到另一個表節點時，會再次生成完整列表。基本上，我想要一個圖像選擇器。我知道img.onclick每次點擊時都會建立圖片列表，但我無法理解它。我已經嘗試過

var element = document.getElementById("menu"); 
element.parentNode.removeChild(element); 

方法嘗試和每次調用事件時刪除附加的div，但它不適用於我。一直努力工作了一段時間，所有的幫助真的很感激。

function addImage(col) { 
    var img = new Image(); 
    img.src = "../www/images/TEST.png"; 
    col.appendChild(img); 
    img.onclick = function() { 
     var myImages = new Array(); 
     myImages[0] = "../www/images/TEST3.png"; 
     myImages[1] = "../www/images/TEST2.png"; 
     myImages[2] = "../www/images/TEST4.png"; 

     for (var i = 0; i < myImages.length; i++) { 
      var allImages = new Image(); 
      allImages.src = myImages[i]; 

      var my_div = document.createElement("div"); 
      my_div.id = "showPics"; 
      document.body.appendChild(my_div); 
      newList = document.createElement("ul"); 
      newList.appendChild(allImages); 
      my_div.appendChild(newList); 
      my_div.style.display = 'block'; 

      allImages.onclick = function (e) { 
       img.src = e.target.src; 
       my_div.style.display = 'none'; 
      }; 
     } 
    }; 
} 
for (r = 0; r < howOften; r++) { 
    row = table.insertRow(-1); 
    for (c = 0; c < numDays; c++) { 
     col = row.insertCell(-1); 
     addImage(col); 
    } 
} 
document.getElementById('holdTable').appendChild(table); 

Answer 1

我創建了代碼的更新版本，在這裏：http://jsfiddle.net/NyxCu/15/這可能是你想做的事情。

有JavaScript風格的細節，你需要學習。但是，讓我們先回顧一下問題：

在這些線路：

 var my_div = document.createElement("div"); 
     my_div.id = "showPics"; 
     document.body.appendChild(my_div); 

你正在創建具有相同ID幾次股利。但是ID在文檔中應該是唯一的。瀏覽器不會抱怨它，但如果你稍後做了getElementById，你會得到一個不需要的div。

在您發送（http://jsfiddle.net/Inkers/NyxCu/）的代碼做一個getElementById幾行以後的jsfiddle鏈接：

  my_div = document.getElementById("showPics"); 
      my_div.appendChild(newList); 

這意味着每點擊第一個圖像，第二個圖像總是添加到同一個div（這就是爲什麼圖像一遍又一遍地重複）。

也許你這樣做黑客，因爲onclick事件處理的循環設置：

 allImages.onclick = function (e) { 
      img.src = e.target.src; 
      my_div.style.display = 'none'; 
     }; 

沒有按預期工作。問題是，JavaScript變量作用域僅適用於功能級別。

這意味着：

for (var i = 0; i < length; i++) { 
     var item = create(i); 
    } 

等同於：

var i, item; 
    for (i = 0; i < length; i++) { 
     item = create(i); 
    } 

這是非常重要的。因爲當你創建一個事件處理程序，如下所示：

var i, item; 
    for (i = 0; i < length; i++) { 
     item = create(i); 
     something.onclick = function() { 
       use(item); 
     } 
    } 

item是不是你所期望的。分配給onclick的函數是一個閉包，它具有對父環境的引用：父函數不是for循環的範圍。這意味着item將始終等於create(length - 1);。

這就是爲什麼在代碼中你得到了意想不到的my_div。

代碼中的另一個問題（我沒有改變，在鏈接的重寫代碼中）是，第二個圖像列表是反覆生成的（檢查HTML以查看）。

總結：

• 元素的ID應該是唯一的。重複的ID不會產生錯誤，但通過ID查找會給您帶來意想不到的結果。

• 注意的JavaScript的範圍差異，以及關閉。一旦你學習它，就非常統一：JavaScript變量範圍始終處於功能級別。

一些提示：

• 學習jQuery的一點，是要幫助你很多與DOM操作。

• 避免new Array()，使用數組文本更短並且更具有可讀性。

• 查看ECMAScript forEach,map和filter。他們將幫助您編寫JavaScript，其功能風格更符合我的口味（它們在舊版本的Explorer中不可用，但可以使用Shim或Underscore.js）。