如何将选择选项元素的值分配给另一个 div 子元素

Question

我正在尝试制作一个画廊，根据一些标准显示图片，例如：1-风格、2-年份和3-尺寸。我为每个标准做了<select>几个选项，如下所示：现在，在另一个 div 中我有实际照片，如果你想看，这里是：  <div id ="CaixaGaleria" class="gallery">    <div><img src="/Imagens/Screenshot_20200728_064349.jpg" class="Pintura a óleo" alt=""></div>    <div><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>    <div><img src="/Imagens/Screenshot_20200725_233940.jpg" alt=""></div>    <div><img src="/Imagens/quadra-mar.260x300.jpg" alt=""></div>    <div><img src="/Imagens/Filme/2.jpg" alt=""></div>    <div><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>    <div><img src="/Imagens/Screenshot_20200725_233349.jpg" alt=""></div>    <div><img src="/Imagens/Screenshot_20200725_233129.jpg" alt=""></div>    <div><img src="/Imagens/Filme/Screenshot_20200725_233110.jpg" class="Lápis" alt=""></div>  </div>我的问题是，当我使用 JavaScript 并更改显示时，如何将element中的值分配给or<option><img><div>以便匹配它们。例如，如果我想给一个 2004 年的 img。如何将它分配给特定的 div/img？

Answer 1

我会给img 的父div 数据属性。您显然希望以自己的语言使用自己的数据。

<div data-year="2014" data-size="xl" data-style="illustration"><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>

然后在 javascript 中有一个事件监听器，并在对象中设置每个值以供以后使用。然后只需默认隐藏所有照片，然后找到匹配的图像并显示它们。

    data = {};

    gallery = document.querySelectorAll(".gallery div");

    document.querySelector("select").addEventListener("change", function(e) {

      data[e.target.getAttribute("id")] = e.target.value;

    

      gallery.forEach(function(div) { //sets them ALL as hidden first

        div.style.display = "none";

      });

    

      if (data["Ano"] != "" & data["Estilo"] != "" && data["Dimensões"] != "") {

        images = document.querySelector('[data-size='" + data["Dimensões"] + "'][data-style='" + data["Estilo"] + "'][data-size='" + data["Ano"] + "']')

      

    

      images.forEach(function(image) {

        image.style.display = "block";

      });

}

    

    });

Answer 2

您的图片库必须根据选择动态生成。如果您可以创建具有相应属性的图像数组，则可以使用数组的 map() 方法迭代它们，并将 div 元素与图像一起注入。