如果我对图像进行模糊处理，当我获取新图像时，下一个图像也不会模糊答案

【问题标题】：If i unblur an image, the next one is unblurred as well when I fetch new ones如果我对图像进行模糊处理，当我获取新图像时，下一个图像也不会模糊
【发布时间】：2022-01-09 00:15:08
【问题描述】：

当我使用 button3 加载模糊图像时，我可以在之后使用 button1 将其取消模糊。但是当我再次单击 button3 加载下一张图片时，它保持不模糊，而不是下一张模糊的图片...

CSS：

.show3 {
    filter: blur(8px);
}

.show2 {
    transition-duration: 5s;
    filter: none !important;  
}

Javascript：

let element2 = document.getElementById("button3");

element2.addEventListener("click", () => {
    let cat_result = document.getElementById("cat_result");
    fetch('https://aws.random.cat/meow')
    .then(res => res.json())
    .then(data => {
        cat_result.innerHTML = `<img src="${data.file}"/>`
    })
    cat_result.classList.toggle("show3");
    
});

let element1 = document.getElementById("button1");

element1.addEventListener("click", () => {
        let cat_result = document.getElementById("cat_result");
        cat_result.classList.toggle("show2");
        
});

【问题讨论】：

您的代码没有关闭“show2”。
是的，我试图以某种方式解开它，但我被卡住了。

标签： javascript fetch-api blur

【解决方案1】：

当您单击第一个按钮并更改它时，您需要删除“show2”，而不是使用切换，而是使用添加和删除。

let element2 = document.getElementById("button3");

element2.addEventListener("click", () => {
    let cat_result = document.getElementById("cat_result");
    
    cat_result.classList.remove("show2");
    cat_result.classList.add('show3');

    fetch('https://aws.random.cat/meow')
    .then(res => res.json())
    .then(data => {
        cat_result.innerHTML = `<img src="${data.file}"/>`
    })
    
});

let element1 = document.getElementById("button1");

element1.addEventListener("click", () => {
        let cat_result = document.getElementById("cat_result");
        cat_result.classList.add("show2");
        cat_result.classList.remove('show3');
        
});

【讨论】：

成功了，谢谢！