第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將選擇選項元素的值分配給另一個 div 子元素

如何將選擇選項元素的值分配給另一個 div 子元素

HUWWW 2023-07-14 15:50:35
我正在嘗試制作一個畫廊,根據(jù)一些標準顯示圖片,例如:1-風格、2-年份和3-尺寸。我為每個標準做了<select>幾個選項,如下所示:現(xiàn)在,在另一個 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?
查看完整描述

2 回答

?
海綿寶寶撒

TA貢獻1809條經(jīng)驗 獲得超8個贊

我會給img 的父div 數(shù)據(jù)屬性。您顯然希望以自己的語言使用自己的數(shù)據(jù)。


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


然后在 javascript 中有一個事件監(jiān)聽器,并在對象中設置每個值以供以后使用。然后只需默認隱藏所有照片,然后找到匹配的圖像并顯示它們。


    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";

      });

}

    

    });


查看完整回答
反對 回復 2023-07-14
?
慕虎7371278

TA貢獻1802條經(jīng)驗 獲得超4個贊

您的圖片庫必須根據(jù)選擇動態(tài)生成。如果您可以創(chuàng)建具有相應屬性的圖像數(shù)組,則可以使用數(shù)組的 map() 方法迭代它們,并將 div 元素與圖像一起注入。



查看完整回答
反對 回復 2023-07-14
  • 2 回答
  • 0 關注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號