JS在單擊圖像時添加事件

Question

我需要更改用 class kfc 標記的 3 個圖像的不透明度，function 在控制台中運行良好，但 onclick 事件似乎不工作

HTML：

<div class="imageAccueil">
    <img id = "macdo" src="https://m.mcdonalds.fr/mcdo-mcdofr-front-theme-mobile/image/mcdo-france-android-app.png" alt="L'image du logo de mc do">
    <img id = "kfc" src="https://e7.pngegg.com/pngimages/743/385/png-clipart-kfc-hamburger-fried-chicken-logo-kfc-cdr-text.png" alt="image logo de kfc">
    <img id = "king" src="https://www.burgerking.fr/logo.jpg" alt="logo de burger king">
</div>
<div id="divGame">
<div class="imgGame">
    <img src="https://media.gqmagazine.fr/photos/6006a7ec5779952c6683660d/16:9/w_2560%2Cc_limit/burger-king-korea-stacker-4-3-2-whopper-launch-001.jpg"
    alt="image de burger king" class="king">
    <img src="https://www.journaldugeek.com/content/uploads/2019/09/mcdonald-fida-lita-12-640x361.jpg"
    alt="image de mc do" class="macdo">
    <img src="https://static.kfc.fr/images/items/lg/Menu_TowerRaclette.jpg?v=4pNBB3"
    alt="image de kfc" class="kfc">
</div>
<div class="imgGame">
    <img src="https://img.grouponcdn.com/deal/AMgjseg9WiFSo2jGrU4G4NTv5HD/AM-960x576/v1/t600x362.jpg"
    alt="image de mc do" class="macdo">
    <img src="https://www.journaldugeek.com/content/uploads/2020/08/rebel.jpg"
    alt="image de burger king" class="king">
    <img src="https://www.foodhiz.com/wp-content/uploads/2020/06/menu-best-of-280-livraison-mcdo-a-domicile-foodhiz.jpg"
    alt="image de mc do" class="macdo"> 
</div>
<div class="imgGame">
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" class="kfc">                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" class="kfc">
</div>
</div>

JS：

function changeOpacity() {
            
            var imagekfc = document.querySelectorAll(".kfc");
            imagekfc.forEach( i => i.style.opacity = "1")
         
        }   
        document.querySelector("#kfc").addEventListener("click",changeOpacity)

Answer 1

document.querySelector("#kfc").addEventListener("click",changeOpacity)

有了這個，您將事件偵聽器添加到 id=kfc 的圖像，但在 function 中，您正在使用 class=kfc 更改圖像的不透明度。

您需要在示例中的圖像中添加“kfc”class

<img id = "kfc" class="kfc" src="https://e7.pngegg.com/pngimages/743/385/png-clipart-kfc-hamburger-fried-chicken-logo-kfc-cdr-text.png" alt="image logo de kfc">

Answer 2

我不太明白你的問題。 您是否正在嘗試創建一些東西，其中肯德基圖像最初是透明的，然后單擊時變得完全不透明？ 如果是這樣，請嘗試以下操作。

HTML：

. . .

<div class="imgGame">
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" class="kfc">                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" class="kfc">
</div>

CSS：

div.imgGame img.kfc {
    opacity: 0.5;

    /* this line is optional - for transition. remove if you don't need */
    transition: opacity 200ms ease-out;
}

JS：

window.addEventListener("load", () => {
    const kfcImages = document.querySelectorAll("div.imgGame img.kfc");

    kfcImages.forEach(img => img.addEventListener("click", () => img.style.opacity = "1"));
});

上面的 JS 等待圖像加載。 然后它為每個圖像附加一個事件偵聽器，當單擊圖像時，會觸發回調，使該圖像完全不透明。 我不知道這是否是你需要的，但我希望它仍然有幫助。

Answer 3

var imagekfc = document.querySelectorAll(".kfc");

應該

    var imagekfc = document.querySelectorAll("#kfc");

. 是 class 的 CSS 選擇器，而 # 是 id 的選擇器