javascript - jQuery cssText 不使用变量

Question

我有一个包含两个框的 html 代码的简单最小示例:

<div class="box current" style="background: red"></div>
<div class="box" style="background: blue"></div>

还有一个 css，它使框在默认情况下不可见:

.box{
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0;
}

并且，一个简单的 jquery 代码，它应该使具有“current”类的 div 由某个变量 ammount 可见

var opacity = 0.7;
//Yes, the code has to use a variable. 
//NOT a static value;
$(".current").css("cssText", "opacity: " + opacity + " !important;");

然而，由于未知原因，这段代码似乎根本不起作用。 将当前框的 css 设置为静态重要使其工作得很好......对于不透明度的静态值。 <强> CODEPEN LINK

任何关于该主题的帮助都会很棒

Answer 1

使用这个::

$(".current").css("opacity" ,""+ opacity );

代替

$(".current").css("cssText", "opacity: " + opacity + " !important;");

希望这有帮助:)