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

TA貢獻1802條經(jīng)驗 獲得超4個贊
您的圖片庫必須根據(jù)選擇動態(tài)生成。如果您可以創(chuàng)建具有相應屬性的圖像數(shù)組,則可以使用數(shù)組的 map() 方法迭代它們,并將 div 元素與圖像一起注入。
添加回答
舉報