首頁(yè) 猿問(wèn) 通過(guò)事件監(jiān)聽(tīng)器切換/顯示圖像

通過(guò)事件監(jiān)聽(tīng)器切換/顯示圖像

JavaScript

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

我有一個(gè)通過(guò) API 調(diào)用獲得的特色產(chǎn)品列表，列表中顯示了標(biāo)題和圖標(biāo)。所有產(chǎn)品也都有圖像（我也通過(guò)相同的 API 調(diào)用獲得圖像）我希望圖像在圖標(biāo)未激活時(shí)不顯示，但在圖標(biāo)激活時(shí)顯示。不確定當(dāng)該產(chǎn)品的圖標(biāo)處于活動(dòng)狀態(tài)時(shí)如何顯示該特定圖像。（對(duì)編碼有點(diǎn)陌生，如果這是一個(gè)奇怪的問(wèn)題，很抱歉）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貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

TL;DR 您需要添加 css 來(lái)隱藏/顯示圖像。

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

但首先，為了更容易，您應(yīng)該將標(biāo)簽放在img它們的內(nèi)部li，而不是旁邊。

因此，首先，讓我們將結(jié)束li標(biāo)記移至末尾，位于img. 注意我還刪除了的內(nèi)聯(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>`;

? }

}

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

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;

}

反對(duì) 回復(fù) 2023-09-14

慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

如果圖像位于單獨(dú)的元素中，您可以將數(shù)據(jù)集自定義屬性添加到 html 中的圖標(biāo)。您可以在 Javascript 中使用一個(gè)值。

IE。

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

并在JS中

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

您可以將其包裝在函數(shù)中，并且可以將任何引用保存在對(duì)象中。通過(guò)這種方式，可以輕松跟蹤任何數(shù)據(jù)并獲得非常可讀的代碼。

反對(duì) 回復(fù) 2023-09-14

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以使用 CSS 來(lái)做到這一點(diǎn)。由于您的事件偵聽(tīng)器會(huì)切換far和fas類，因此請(qǐng)使用與這些容器內(nèi)部匹配的 CSS 選擇器img。

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

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

反對(duì) 回復(fù) 2023-09-14

3 回答
0 關(guān)注
146 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

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

熱搜

最近搜索清空

通過(guò)事件監(jiān)聽(tīng)器切換/顯示圖像

通過(guò)事件監(jiān)聽(tīng)器切換/顯示圖像

3 回答

添加回答