在 JavaScript 按钮上应用某些 .class 并避免文本未对齐

Question

这是带有代码的 JSFiddle。目标：单击按钮应仅.blur_filter_off将类应用于. 整个文本应保持原样，即1行。当前问题： 1）单击按钮会停用属性而不是应用类。2)单击按钮时文本分为2行。附加信息：一般情况下不确定，因为想法如下：最初通过类模糊，并在通过类单击按钮时变得不模糊。也许有一种方法可以在不实现财产的情况下做到这一点。span id="hint"display:none.blur_filter_offdisplay:nonespan id="hint"blur_filter_onblur_filter_offdisplay:nonefunction showHint(id1) {  var x = document.getElementById(id1).style;  x.display = (x.display != "block") ? "block" : "none";}.example {  color: #1f2c60;  font-size: calc(0.7em + 2.3vw);}.blur_filter_on {  filter: blur(0.35em);}.blur_filter_off {  animation-name: blur_decrease;  animation-timing-function: ease;  animation-duration: 1s;}@keyframes blur_decrease {  from {    filter: blur(0.35em);  }  to {    filter: blur(0);  }}<div>  <span class="example"><span class="blur_filter_on"><span id="hint">This is</span> the sentence i use as an</span> example.</span></div><a class=hint href="#" onclick="showHint('hint')">BUTTON</a>

Answer 1

这是可以实现您指定的目标的解决方案。我在这里使用普通的 javascript，你也可以使用 jQuery 来实现这一点。它还需要调整 HTML 和 CSS。

更新后的工作小提琴在这里

function showHint(id1) {

  var x = document.getElementById(id1);

  var blurOffClass = "blur_filter_off";

  

  if (!x.classList.contains(blurOffClass)) {

     x.classList.add(blurOffClass);

  }

}

.example {

  color: #1f2c60;

  font-size: calc(0.7em + 2.3vw);

}

.blur_filter_on > * {

  filter: blur(0.35em);

}

.blur_filter_off {

  animation-name: blur_decrease;

  animation-timing-function: ease;

  animation-duration: 1s;

  filter: blur(0);

}

@keyframes blur_decrease {

from { filter: blur(0.35em); }

to { filter: blur(0); }

}

<div>

  <span class="example">

    <span class="blur_filter_on">

        <span id="hint">This is</span>

        <span>the sentence i use as an</span>

    </span>

    example.

  </span>

</div>

<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>