簡單縮短我的代碼

Question

我正在尋找一種方法來簡化使用for循環的代碼。任何幫助表示讚賞。

我設置了一個系統，當有人點擊鏈接上有日期的鏈接（例如照片存檔）時，打開模式框架中的全部圖像。我有很多不同的日期，每次我創建一個新的日期，我必須在代碼中插入一百萬次，如下所示。也許我可以創建一個包含日期的數組，並在數組中循環並生成下面的代碼。這可能有一個簡單的解決方法，但我是網絡開發的新手。謝謝！！！！

// Get the modal gallery 
 
var gallery161207 = document.getElementById('gallery161207'); 
 
var gallery161130 = document.getElementById('gallery161130'); 
 
... 
 
var gallery150916 = document.getElementById('gallery150916'); 
 

 
// Get the close button 
 
var closeButton161207 = document.getElementById('closeModal161207'); 
 
var closeButton161130 = document.getElementById('closeModal161130'); 
 
... 
 
var closeButton150916 = document.getElementById('closeModal150916'); 
 

 
// Get the buttons 
 
var btn161207 = document.getElementById('161207'); 
 
var btn161130 = document.getElementById('161130'); 
 
... 
 
var btn150916 = document.getElementById('150916'); 
 

 
// When the user clicks on the button, open the modal gallery 
 
function openGallery(source) { 
 
\t // Open the modal gallery depending on what was clicked 
 
\t if (source == '161207') 
 
\t \t gallery161207.style.display = "block"; 
 
\t if (source == '161130') 
 
\t \t gallery161130.style.display = "block"; 
 
\t ... 
 
\t if (source == '150916') 
 
\t \t gallery150916.style.display = "block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
closeButton161207.onclick = function() { 
 
    gallery161207.style.display = "none"; 
 
} 
 
closeButton161130.onclick = function() { 
 
    gallery161130.style.display = "none"; 
 
} 
 
... 
 
closeButton150916.onclick = function() { 
 
    gallery150916.style.display = "none"; 
 
} 
 

 
btn161207.onclick = function() { openGallery('161207'); } 
 
btn161130.onclick = function() { openGallery('161130'); } 
 
... 
 
btn150916.onclick = function() { openGallery('150916'); } 
 

 
window.onclick = function(event) { 
 
\t if (event.target == gallery161207) { 
 
\t \t closeButton161207.onclick(); 
 
\t } 
 
\t if (event.target == gallery161130) { 
 
\t \t closeButton161130.onclick(); 
 
\t } 
 
\t ... 
 
\t if (event.target == gallery150916) { 
 
\t \t closeButton150916.onclick(); 
 
\t } 
 
}

Answer 1

你可以嘗試做一個對象保存所有的DOM引用，並使用這些。這個答案利用了jQuery的文檔就緒功能。

var sourceList = []; 
 
var sources = {}; 
 
var wrappers = document.getElementsByClassName('gallery-wrapper'); 
 
for(var i = 0; i < wrappers.length; i++){ 
 
    sourceList.push(wrappers[i].id); 
 
} 
 

 
$(document).ready(function() { 
 
    for(var i = 0; i < sourceList.length; i++){ 
 
     var source = {}; 
 
     source.gallery = document.getElementById("gallery"+sourceList[i]); 
 
     source.button = document.getElementById("button"+sourceList[i]); 
 
     source.closeButton = document.getElementById('closeButton'+sourceList[i]); 
 
     source.button.onclick = function() { 
 
      if(source.gallery)source.gallery.style.display = "block"; 
 
     } 
 
     source.closeButton.onclick = function() { 
 
      if(source.gallery)source.gallery.style.display = "none"; 
 
     } 
 
     sources[sourceList[i]] = source; 
 
    } 
 
    window.onclick = function(event) { 
 
     for (var source in sources) 
 
      if (event.target == sources[source].gallery) 
 
       sources[source].closeButton.onclick(); 
 
    } 
 
});

Answer 2

你可以這樣做很容易使用jQuery，但我相信，因爲你是新的Web開發，你要從頭開始了。

首先，我們來設置按鈕來顯示畫廊。我會說你給每個按鈕一個class="gallery-button"屬性和一個id="<id of gallery>"。畫廊也應該有ID id="gallery-<id of gallery>"。然後：

var buttons = document.getElementsByClassName("gallery-button"); 
for(var i =0; i < buttons.length; i++){ 
    var elem = buttons[i]; 
    elem.onclick = function() { 
    document.getElementById('gallery' + elem.id).style.display="block"; 
    }; 
    } 
} 

我們可以做的關閉按鈕類似的事情（假設他們有和id="close-<id of gallery>"標識其class="close-button"：

var closeButtons = document.getElementsByClassName("close-button"); 
for(var i =0; i < buttons.length; i++){ 
    var elem = closeButtons[i]; 
    elem.onclick = function() { 
    document.getElementById('gallery-' + elem.id.replace("close-", "")).style.display="none"; 
    }; 
    } 
} 

然後：

window.onclick = function(event) { 
    var id = event.target.id; 
    if (id.startsWith("gallery-") { 
    var closeButton = document.getElementById("close-" + id.replace("gallery-", "")); 
    closeButton.onclick(); 
    } 
}