Einfache Kürzung meines Codes

Question

Ich bin auf der Suche nach einer Möglichkeit, diesen Code mit for-Schleifen zu vereinfachen. Jede Hilfe wird geschätzt.

Ich richte ein System zum Öffnen von modalen Rahmen voller Bilder ein, wenn jemand auf einen Link mit einem Datum klickt (z. B. ein Fotoarchiv). Ich habe viele verschiedene Termine und jedes Mal, wenn ich ein neues mache, muss ich es millionenfach in den Code einfügen, wie unten gezeigt. Vielleicht könnte ich ein Array irgendeiner Art machen, das die Daten enthält und das Array durchläuft und den Code unten erzeugt. Es gibt wahrscheinlich eine einfache Lösung, aber ich bin neu in der Web-Entwicklung. Vielen Dank!!!!

// 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

Sie können ein Objekt versuchen, machen alle dom Referenzen zu sparen und diejenigen verwenden. Diese Antwort verwendet jQuery für seine Dokumentbereitschaftsfunktion.

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

Sie diese einfach mit jQuery ziemlich tun könnte, aber ich nehme an, da Sie auf dem Web-Entwicklung neu sind, möchten Sie von Grund auf neu beginnen.

Zuerst beschäftigen wir uns mit der Einrichtung der Schaltflächen zum Anzeigen der Galerien. Ich würde sagen, Sie geben jeder Taste ein class="gallery-button" Attribut und ein id="<id of gallery>". Die Galerien sollten auch IDs id="gallery-<id of gallery>" haben. Dann:

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

Wir können für die Schließen-Button eine ähnliche Sache tun (vorausgesetzt, sie haben IDs von id="close-<id of gallery>" und ihre 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"; 
    }; 
    } 
} 

Und dann:

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