Question

我在这里有一个带有国家选择按钮的图库，可以在div中显示一个背景图像。＃displayata＆＃34;，从数组中选择图片＆＃34; arrayindex＆＃34;。＆＃34; next＆＃34; /＆＃34; previous＆＃34;选择按钮，在另一个div＆＃34; .containsNext＆＃34;中打开一个单独的图库，它位于displayarea div上方。关闭按钮关闭这两个div。到目前为止，这是有效的。现在我想根据点击的国家按钮，在.containsNext div中显示不同阵列中的不同图库（或者可以是相同的，我不知道哪些更有效）。比如，对于按钮＆＃34;克罗地亚＆＃34;，显示第3行照片数组中的图片，但是对于按钮西班牙，将显示另一个数组arraySpain（第9行）。我知道我们应该发布我们尝试过的代码，但我没有提出任何有用的东西。对于displayarea中的背景图片，我已经完成了以下内容

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

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

笔链接： http://codepen.io/damianocel/pen/gPggLB

在点击＆＃34; next＆＃34;之前，请点击国家/地区按钮。或＆＃34;之前＆＃34;纽扣。感谢您的帮助

Answer 1

据我所知，首先你想为每个国家建立一个不同的阵列，然后你不想为每个按钮重新编写你的代码。所以对于你拥有的每个国家：按钮与国家的名称背景图片幻灯片显示的图像数组我的建议是使用模板。我之前使用过这些http://handlebarsjs.com/。因此，通常模板允许您通过引入模式来剪切重复代码，模式中的许多元素都遵循该模式。因此，想象一下，不是为国家名称设置不同的数组，而是为幻灯片显示另一个用于bg-images和另一个用于幻灯片放映的数组，您可以像这样构建数据： http://codepen.io/teft74/pen/MKEQBp?editors=101（很遗憾，如果网站拒绝接受我的代码，请向外部提供非外部信息）

此结构允许您使用模板。所以对于你拥有的每个国家：按钮与国家的名称背景图片幻灯片显示的图像数组在模板中，您可以这样写：

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

这将从您的数据中获取每个国家/地区名称并将其放在按钮中，并为每个国家/地区创建按钮。然后，当您单击该按钮时，它会转到另一个模板，该模板将填充相应按钮中的数据。例如，用户点击名称为西班牙（您的国家/地区阵列中的一个单元格）的按钮，您可以使用同一单元格中的背景图像和图库填充模板。

我很抱歉我可以更具体，但我必须重新编写代码才能使其与模板一起使用。这似乎是很多工作（我提供的想法），但一旦你这样做，它就更具可扩展性。您只需创建一次模板，如果您想添加另一个国家/地区，您只需添加数据（名称，bg-image，gallery []），模板就可以为您生成完整的HTML，CSS和JavaScript函数，而无需编写它一次又一次。检查车把并找出（按照我的一般指示）如何将其应用到您的箱子中。祝你好运！

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

1 个答案: