首頁猿問通過事件監(jiān)聽器切換/顯示圖像

通過事件監(jiān)聽器切換/顯示圖像

JavaScript

縹緲止盈 2023-09-14 18:12:08

我有一個通過 API 調用獲得的特色產品列表，列表中顯示了標題和圖標。所有產品也都有圖像（我也通過相同的 API 調用獲得圖像）我希望圖像在圖標未激活時不顯示，但在圖標激活時顯示。不確定當該產品的圖標處于活動狀態(tài)時如何顯示該特定圖像。（對編碼有點陌生，如果這是一個奇怪的問題，很抱歉）export function featuredProducts(products)const featuredProductsContainer = document.querySelector(".featured-products_list");featuredProductsContainer.innerHTML = "";for (let i = 0; i < products.length; i++) { console.log(products[i]); if (products[i].featured) { featuredProductsContainer.innerHTML += `<li class="featured-products">${products[i].title}</li><img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}" height="300" width="300" style="display: none;">`; }}const flag = document.querySelectorAll(".featured-products i");flag.forEach(function(icon) { icon.addEventListener("click", clicked);});function clicked(event) { event.target.classList.toggle("fas"); //active event.target.classList.toggle("far"); //unactive}}

查看完整描述

3 回答

翻閱古今

TA貢獻1780條經驗獲得超5個贊

TL;DR 您需要添加 css 來隱藏/顯示圖像。

我將提出一種稍微不同的方法，即直接切換圖像上的類，以避免對標記和巨大的 CSS 選擇器進行更復雜的重新排列。

但首先，為了更容易，您應該將標簽放在img它們的內部li，而不是旁邊。

因此，首先，讓我們將結束li標記移至末尾，位于img. 注意我還刪除了的內聯(lián)樣式style="display: none;"。

for (let i = 0; i < products.length; i++) {

? console.log(products[i]);

? if (products[i].featured) {

? featuredProductsContainer.innerHTML +=

? ? ? `<li class="featured-products">

${products[i].title}

<img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}"?

height="300" width="300"></li>`;

? }

}

然后，在您的點擊處理程序中，讓我們做一些不同的事情：

function clicked(event) {

? // remove all active classes

? const $imgs = document.querySelectorAll('.fas')

? $imgs.forEach(i => i.classList.toggle('fas'))

? // add active class to targeting img

? const $img = event.target.closest('li.featured-products').querySelector('img')

? $img.classList.toggle("fas")

? $img.classList.toggle("far");

}

最后，修改自@barmar

.featured-products img.fas {

? display: block;

}

.featured-products img.far {

? ? display: none;

}

反對回復 2023-09-14

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

有很多方法可以實現此目的，很大程度上取決于觸發(fā)圖標活動狀態(tài)的因素。如果它是任何類型的輸入，并且您可以將數據保存在同一個容器中，那么您需要做的就是向父級添加一個“活動”CSS 類。這是最高效的方法，因為您可以將讀取、寫入和任何回流保持在最低限度。只需在 css 中為活動類添加一般規(guī)則： .active img { visibility: visible; }

如果圖像位于單獨的元素中，您可以將數據集自定義屬性添加到 html 中的圖標。您可以在 Javascript 中使用一個值。

IE。

<img id="icon" dataset-foo="imgContainer">

并在JS中

var imgContainer = document.getElementById(icon.dataset.foo) imgContainer.classList.add("active")

您可以將其包裝在函數中，并且可以將任何引用保存在對象中。通過這種方式，可以輕松跟蹤任何數據并獲得非?？勺x的代碼。

反對回復 2023-09-14

海綿寶寶撒

TA貢獻1809條經驗獲得超8個贊

您可以使用 CSS 來做到這一點。由于您的事件偵聽器會切換far和fas類，因此請使用與這些容器內部匹配的 CSS 選擇器img。

.featured-products.fas img {
  display: block;
}

.featured-products.far img {
    display: none;
}

反對回復 2023-09-14

3 回答
0 關注
163 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網站添加到書簽

微信客服

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

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

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

熱搜

最近搜索清空

通過事件監(jiān)聽器切換/顯示圖像

通過事件監(jiān)聽器切換/顯示圖像

3 回答

添加回答