如何基于数组使用 HTML 和 JavaScript 重新排序图像和描述？

Question

我正在尝试制作一个网站，其中包含可以重新排序的带有文本的图像（文本和图像匹配）。

我有图像链接到的图像 URL、描述和网页链接的数组。 例如：

var imgArray = ["dog.jpg", "cat.jpg", "frog.jpg", "mouse.jpg"] //but with actual URLs for the image
var linkArray = ["dog.html", "cat.html", "frog.html", "mouse.html"]
var descArray = ["Dog", "Cat", "Frog", "Mouse"] //text that will be displayed below the image

我想在屏幕上显示的图像基于另一个条件，该条件会生成一个名为works 的数组（例如works = [1, 4]，这意味着图像1 和4 应该显示在屏幕上）。 我计划通过上述数组访问图像 1 和 4 的详细信息。

此外，如果用户从下拉列表中进行选择，他们可以更改显示图像的顺序（例如：不是图像 1 然后 3 然后 4，它将更改为图像 4 然后 1 然后 3，基于另一个数组）。

现在，我所拥有的图像（显示的图像不超过 15 个，但根据条件可以更少）只是：

<div class = "wrapper">
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
    <div class = "gallery" name="gallery" id = "gallery"><div name = "desc" class = "desc"></div></div>
</div>

我确信这是不好的风格，但我找不到更好的方法来做到这一点，以便它与我的下一部分一起工作并允许它基于“gallery”和“desc”进行风格化。 然后，为了实际显示图像（基于起始顺序），我有：

var imgGallery = document.getElementsByName("gallery");
var imgDesc = document.getElementsByName("desc");

for(i=0;i<works.length;i++){
      var a = document.createElement('a');
      var img = document.createElement("IMG");
      a.setAttribute('href', linkArray[works[i]-1]);
      img.setAttribute('src', imgUrls[works[i]-1]);
      img.setAttribute('width', '300');
      img.setAttribute('height', '225');
      a.appendChild(img);
      var desc = document.createElement("P")
      desc.innerText = descArray[works[i]-1];
      imgGallery[i].appendChild(desc);
      imgDesc[i].appendChild(a);

    }

    }

注意：works 是包含应该显示的图像的数组 - 例如。 works = [1, 2, 4] 另外，我知道它看起来像 desc 和 gallery 切换，但是当我这样做时它可以工作。

然后，使用某些条件，我有 arr2，它是一个具有相同数字但顺序不同的数组 - 例如：arr2 = [1, 4, 2]。 下面的代码按 arr2 顺序显示图像：

var wrapper = document.getElementsByClassName("wrapper");
var items = wrapper[0].children;
var elements = document.createDocumentFragment();

arr2.forEach(function(idx) {
  elements.appendChild(items[idx].cloneNode(true));
});

wrapper[0].innerHTML = null;
wrapper[0].appendChild(elements);

*我从一个不同问题的 Stack Overflow 上的用户那里得到了这个代码。

现在，对于这个问题：

如果作品和 arr2 数组包含所有可能的图像（例如 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ] 因为总共可能有 15 个图像 - 我没有在 imgArray、linkArray、descArray 示例中显示所有图像）。

但是，如果图像少于 15 张（例如，只有 [1, 5, 7, 15]）那么它将不起作用，并且并非所有应该显示的图像都可以（例如可能只是图像 1 和 7出现）。 无论“作品”数组中有多少图像，我都想知道如何进行这项工作。

顺便说一句：如果有人有更好的方法来完全做到这一点，那也将不胜感激。 总之，我想做的是：

1. 根据每个用户更改的数组显示特定图像（例如：works = [1, 4, 7] - 我想显示图像 1, 4, 7 及其各自的描述）

2. 如果选择了下拉选项，请更改图像的顺序（以及相应的描述）。

我不认为我可以在正文中随机使用 imgs 执行document.createElement ，因为我需要将它们放在“gallery”和“desc”类中以便对它们进行样式化。

编辑：我从不同的帖子中使用了这个答案，所以现在我可以重新排序图像。 我有这个代码（类似于我上面的代码）：

if (document.getElementById('search').value == "option1") {
    //code that finds goodArray for option2
}
if (document.getElementById('search').value == "option2") {
    //code that finds goodArray for option2
}

    var wrapper = document.getElementsByClassName("wrapper");
    var items = wrapper[0].children;
    var elements = document.createDocumentFragment();

    goodArray.forEach(function(idx) {
        elements.appendChild(items[idx].cloneNode(true)); //line 353
    });

    wrapper[0].innerHTML = null;
    wrapper[0].appendChild(elements);

goodArray 是具有图像顺序的数组 - 例如：arr2 = [1, 4, 7, 8] 基于选项 # search 是我的下拉列表的 id option1 是我的下拉列表中第一个选项的值，option2 是第二个选项的价值等。

其他代码（以 var 包装器开始）由所有下拉列表共享。 我当前的问题是单击的第一个下拉列表（假设页面开始为空白）将起作用，但单击的下一个下拉列表不会更改图像，即使它本身会起作用。 我不确定如何制作它，因此每次单击新选项时，从“var wrapper =”开始的代码都会起作用并“重新启动”。 我尝试将它放在单独的 ifs 中，但这也不起作用。

选择第二个下拉列表后我得到的错误是：

Uncaught TypeError: Cannot read property 'cloneNode' of undefined
    at choice.html:354
    at Array.forEach (<anonymous>)
    at change (choice.html:353)
    at HTMLSelectElement.onchange (choice.html:56)

Answer 1

现在回答您的问题：您使用一个数组来保存您提到的下拉列表的顺序。 我认为下拉列表中的值 -1 对应于您的数据所在的 3 个数组的索引？

如果是这种情况，请使用：

const imgArray = ["dog.jpg", "cat.jpg", "frog.jpg", "mouse.jpg"]
const linkArray = ["dog.html", "cat.html", "frog.html", "mouse.html"]
const descArray = ["Dog", "Cat", "Frog", "Mouse"]

const arr2 = [2,3,1,4]

// assuming you only have one wrapper
const wrapper = document.querySelector(`.wrapper`)

arr2.map(element=>{
    const div = document.createElement(`div`);
    // adding a class to element 
    div.classList.add(`gallery`)

    const a = document.createElement(`a`)
    // element coresponds to 2 for the first run, then 3 then 1 then 4
    a.setAttribute('href', linkArray[element-1]);

    const p =document.createElement(`p`)
    p.innerText = descArray[element-1]

    div.appendChild(a)
    div.appendChild(p)
    //..... you get the idea

}) 

这将清理一些代码并以正确的顺序生成显示的元素，因此您不必再次对它们进行排序。