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
– connexo, Commented Dec 4, 2016 at 0:07

Max · Accepted Answer · 2016-12-04 00:07:43Z

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 4, 2016 at 0:07

Max

1,3459 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Over a year ago

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.

Max Over a year ago

@Peter could you share the values of test and test2 so that I can give the correct code?

Peter Over a year ago

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

Max Over a year ago

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 stackoverflow.com/questions/171251/…

connexo · Accepted Answer · 2016-12-04 00:23:19Z

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

Collectives™ on Stack Overflow

How do i use a simple string variable with jquery?

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related