Javascript 根据单击的按钮显示不同的库

我这里有一个图库，有国家选择按钮，可以在div.display区域打开一个背景图像，从数组数组索引中选择图片。 和下一个/上一个选择按钮，它们在另一个div.containsNext中打开一个单独的库，该div.containsNext位于displayarea div的上方。 关闭按钮关闭这两个div。 到目前为止，这一切都很顺利。 现在我想从不同的阵列显示不同的图库，或者可以是相同的，我不知道在.contains下一个div中有什么更有效，基于单击哪个国家按钮。例如，对于按钮克罗地亚，将显示第3行照片数组中的图片，但对于按钮西班牙，将显示另一个数组arraySpainline 9。 我知道我们应该发布我们尝试过的代码，但我没有想出任何有用的东西。 对于displayarea中的背景图片，我做了如下操作

function addImageInto(arrayIndex, container) {
var displayArea = document.querySelector('.displayArea');
if (displayArea.querySelector('.' + container.id)) {
    return;
}
displayArea.innerHTML = '';

但是我不能用它来实现我的目标。 所有其他函数都在工作，向前和向后函数，向前函数嵌套在从第39行到第65行的相当大的函数中。 我可以通过为每个按钮反复编写相同的代码来做到这一点，但这不是最有用的方法

指向钢笔的链接：

请在单击下一个或上一个按钮之前单击某个按钮。

---

感谢您提供的任何帮助

据我所知，首先，您希望每个国家/地区使用不同的数组，其次，您不希望为每个按钮重新编写代码。 因此，对于每个国家： 带有国家名称的按钮 背景图像 用于幻灯片放映的图像数组 我的建议是使用模板。我以前用过这些。 因此，通常模板允许您通过引入一个模式来剪切重复的代码，该模式在代码中的许多元素中都遵循。 因此，想象一下，不用为国家名称设置不同的数组，也不用为bg图像设置不同的数组，也不用为幻灯片设置不同的数组，您可以这样构造数据： 很抱歉给你联合国外部喜欢的网站拒绝接受我的代码

此结构允许您使用模板。 因此，对于每个国家： 带有国家名称的按钮 背景图像 用于幻灯片放映的图像数组 在模板中，您可以这样编写：

 {{#each country}}  // "each" makes loop for each country, returning a button
    <button> {{name}}</button>  
  {{/country}}

这将从您的数据中获取每个国家的名称，并将其放置在按钮中，并为每个国家创建按钮。 然后，当您单击按钮时，它会将您带到一个不同的模板，该模板由相应按钮中的数据填充。例如，如果用户单击名为：spain的按钮，这是您所在国家/地区数组中的一个单元格，则可以使用同一单元格中的背景图像和图库填充模板

---

很抱歉，我可以说得更具体一些，但我必须重新编写您的代码，使其与模板一起工作。我提出的想法似乎需要很多工作，但一旦你这么做了，它的可扩展性就会大大提高。你只需制作一次模板，如果你想添加另一个国家，你只需添加dataname、bg image、gallery[]，模板就会为你生成整个HTML、CSS和JavaScript函数，而无需一次编写一遍。查看车把，并根据我的一般说明计算出如何将其应用到您的案例中。祝你好运

是的，你有点明白了。国家按钮从第一个数组中获取一张图片，这里是一张来自太空的图片。然后，在显示时，“下一步”按钮将显示另一个图库，该图库正好位于上一个div的上方。这将从另一个阵列中提取图片，最好是从特定于国家的阵列中提取。其想法是学习OOP，原型，而不是使用任何框架。我能想到的最好办法是给点击的按钮一个活动类，比如ActiveSpania，然后从一个国家特定的数组中获取bg图片。类似于ifbtn.hasClass{forwardargument for specific array}。实际上，我认为在nation按钮上添加一个选定的类，然后从非选定按钮中删除类，然后调用向前/向后函数，只从一个大数组中按索引位置进行选择最接近这个想法。其他一切都需要完全重写LOL或每个按钮的功能。这也不算太糟，第一个按钮有一个原型，然后在每个新实例中更改代码，这有意义吗？