如何清除元素点击后的模糊，并在再次点击后再次模糊？

Question

所以呃..我试图在点击div元素后对它进行“取消模糊”/模糊过渡，使用以下代码中的2个类名：取消模糊和模糊，这会清除元素的模糊/模糊，分别。请看一下：

$(document).ready(function() {
  var n = false;
  var c = document.querySelector("#n");
  c.addEventListener("click", function() {
    n = !(n);
    $(".content").toggleClass(n ? "unblur" : "blur");
  });
});

.content {
  width: 300px;
  border: solid 1px black;
  padding: 10px;
  filter: blur(8px);
}

.unblur {
  filter: blur(0px);
  transition: filter 1s;
}

.unblur:active {
  filter: blur(0px);
}

.blur {
  filter: blur(0px);
  transition: filter 1s;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div id="n">
  <div class="content">
    Hello World!</div>
</div>

但是，当“内容”类尝试在“取消模糊”类之后触发“模糊”类时，出现了问题。我该如何解决？谢谢！！

Answer 1

尝试这样的事情...

JQuery 中修订的 Javascript

$(document).ready(function() {
    var c = document.querySelector("#n");
    c.addEventListener("click", function() {
        if($(".content").hasClass("blur")) {
            $(".content").removeClass("blur").addClass("unblur");
        } else {
            $(".content").removeClass("unblur").addClass("blur");
        }
    });
});

更新了CSS

 .content {
 width: 300px;
 border: solid 1px black;
 padding: 10px;
 filter: blur(8px);
 transition: filter 1s;
 }

.unblur {
  filter: blur(0px);
}

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