如何在 jquery 中使用简单的字符串变量？

Question

我有这个代码：

$(function(){

  $( "div.modal-content3" ).on( "swipeleft", swipeleftHandler );


  function swipeleftHandler( event ){
  if ($('.modal-content').css('display') == 'block' && $('.modal-content2').css('display') == 'block') {

  $("div.modal-content3").css({"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"});
  $("div.modal-content2").css({"zIndex":"4", "transform":"scale(0.9)", "marginTop":"-25px", "animationName":"none", "animationDuration":"0"});
  $("div.modal-content").css({"zIndex":"5", "transform":"scale(1)", "marginTop":"0px"});
}

我怎样才能把代码的css部分：

"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"

并将其放入变量中，以便稍后插入到 jquery 代码中？

我尝试过类似的方法，但没有成功：

var test = '"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px",
"animationName":"animleft", "animationDuration":"0.7s"';

$("div.modal-content3").css({ + test + });

我是在混合使用 javascript 和 jquery，这是它不起作用的原因吗？

Answer 1

原因是如果你想设置多个属性，jQuery 的.css() 方法不接受string，而是需要一个object，其中包含与你要更改的CSS规则匹配的键值对。

var test = { "zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s" };

$("div.modal-content3").css(test);

尽管这可行，但感觉你在这里过于复杂了。

您为什么不简单地创建以下 CSS 类：

.my-class { 
  z-index: 3;
  transform: scale(0.8);
  margin-top: -50px;
  animation-name: animleft;
  animation-duration: 0.7s
}

这会将您的 jQuery 简化为

$("div.modal-content3").addClass("my-class");

Answer 2

您将对象表示为字符串。你应该这样做

var test = {"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"};

或者你可以解析你拥有的 JSON

var test = JSON.parse('"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"');

至于您的下一行，您将 { 和 } 混淆为字符串。如果您使用上面的变量定义，并删除 { + 和 + } 那么它应该可以工作。