How do i use a simple string variable with jquery?

Question

I have this code:

$(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"});
}

How can i put the css part of the code:

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

and put it in a variable, to later insert to the jquery code?

i've tried something like this but with no success:

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

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

Am i mixing javascript and jquery and is that the reason it doesn't work?

The reason is that jQuery's `.css()` method does not accept a `string` if you want to set multiple properties that way, but instead requires an `object` containing key-value pairs that match the CSS rules you want to change. — connexo, Dec 04 '16 at 00:07

score 3 · Accepted Answer · answered Dec 04 '16 at 00:07

3

You are representing an object as a string. You should instead do

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

OR you could parse the JSON you have

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

As for your next line, you are confusing { and } for strings. If you use the variable definitions above, and remove the { + and + } then it should work.

answered Dec 04 '16 at 00:07

Max

1,325
9
20

Thank you, i use the top version and it works great. How would i do if i want to use two different variables in the jquery code after eachother? I'm trying $("div.modal-content3").css(test + test2); but it doesnt seem to work. – Peter Dec 04 '16 at 00:34
@Peter could you share the values of `test` and `test2` so that I can give the correct code? – Max Dec 04 '16 at 00:44
var test = {"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px"}; var test2 = {"animationName":"animleft", "animationDuration":"0.7s"}; $("div.modal-content3").css(test + test2); I'm just trying to insert a bunch of css text into the div modal-content3, but the css values should be from two different variables if possible, test and test2 – Peter Dec 04 '16 at 00:47
You have two objects, you will want to do `test.assign(test2)`. This merges `test2` into `test`, changing test and returning its new value (the value you should pass to jQuery) - see http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically – Max Dec 04 '16 at 00:50

connexo · Answer 2 · 2016-12-04T00:23:19.547

The reason is that jQuery's .css() method does not accept a string if you want to set multiple properties, but instead requires an object containing key-value pairs that match the CSS rules you want to change.

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

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

Even though this works, it feels like you're overcomplicating stuff here.

Why don't you simply create the following CSS class:

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

which would simplify your jQuery to

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

How do i use a simple string variable with jquery?

2 Answers2