javascript - 我如何在 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

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

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"');

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