Question

我正在寻找一种使用for循环简化此代码的方法。任何帮助表示赞赏。

我正在建立一个系统，当有人点击带有日期的链接（例如照片存档）时，打开充满图像的模态框架。我有很多不同的日期，每次我创建一个新的日期，我必须在代码中插入一百万次，如下所示。也许我可以创建一个包含日期的数组，并循环遍历数组并生成下面的代码。可能有一个简单的解决方法，但我是Web开发的新手。感谢!!!!

＆＃13;

// 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) {
	// Open the modal gallery depending on what was clicked
	if (source == '161207')
		gallery161207.style.display = "block";
	if (source == '161130')
		gallery161130.style.display = "block";
	...
	if (source == '150916')
		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) {
	if (event.target == gallery161207) {
		closeButton161207.onclick();
	}
	if (event.target == gallery161130) {
		closeButton161130.onclick();
	}
	...
	if (event.target == gallery150916) {
		closeButton150916.onclick();
	}
}

＆＃13;

Answer 1

您可以尝试使对象保存所有dom引用并使用它们。这个答案使用jQuery作为其文档就绪函数。

＆＃13;

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

＆＃13;

Answer 2

你可以使用jQuery相当容易地做到这一点，但我认为，既然你是网络开发的新手，你就会想从头开始。

首先，让我们处理设置按钮以显示画廊。我说你给每个按钮一个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为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(); 
  }
}

简单缩短我的代码

2 个答案: