私のコードの単純な短縮

Question

私はforループを使ってこのコードを単純化する方法を探しています。どんな助けもありがとうございます。

誰かがリンク先の日付（写真のアーカイブなど）をクリックしたときに、画像で完全なモーダルフレームを開くシステムをセットアップしています。私は多くの異なる日付を持ち、新しいものを作るたびに、以下に示すようにコードに100万回挿入する必要があります。たぶん私は日を保持し、配列をループし、下のコードを生成するいくつかの並べ替えの配列を作ることができます。これにはおそらく簡単な修正がありますが、私はWeb開発の初心者です。ありがとう!!!!

// 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 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(); 
    } 
}