如何将选择选项元素的值分配给另一个 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 中有一个事件监听器，并在对象中设置每个值以供以后使用。然后只需默认隐藏所有照片，然后找到匹配的图像并显示它们。&nbsp; &nbsp; data = {};&nbsp; &nbsp; gallery = document.querySelectorAll(".gallery div");&nbsp; &nbsp; document.querySelector("select").addEventListener("change", function(e) {&nbsp; &nbsp; &nbsp; data[e.target.getAttribute("id")] = e.target.value;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; gallery.forEach(function(div) { //sets them ALL as hidden first&nbsp; &nbsp; &nbsp; &nbsp; div.style.display = "none";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (data["Ano"] != "" & data["Estilo"] != "" && data["Dimensões"] != "") {&nbsp; &nbsp; &nbsp; &nbsp; images = document.querySelector('[data-size='" + data["Dimensões"] + "'][data-style='" + data["Estilo"] + "'][data-size='" + data["Ano"] + "']')&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; images.forEach(function(image) {&nbsp; &nbsp; &nbsp; &nbsp; image.style.display = "block";&nbsp; &nbsp; &nbsp; });}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });

Answer 2

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