jQuery add function parameter or variable into id selector

Question

Say you have 10-15 fixed divs that you'd like to animate() with different parameters. Using jQuery, what's the best method to pass different parameters for each div? My current method, below, attempts to pass the id text in the function. This is the first step, and eventually I imagine I'd pass the animation() duration and rotation in as function parameters (e.g. float(ID, duration, rotation)It now returns the following: Error: Syntax error, unrecognized expression: "#candy"

$(document).ready(function () {
    float("candy");
    float("candy2");
    //etc
});

function float(ID) {
    let id = "#" + ID;
    $('"' + id + '"').animate({
        top: 100,
      }, 5000 );
};

You are double passing quotes, causing it to respond as if you have something similar to this: ""#candy"" instead of "#candy", there is no need to do: '"' + id + '"' Do only $(id) and you should be fine on the error, side. — Thiago de Oliveira Cruz
– Thiago de Oliveira Cruz, Commented Jan 27, 2020 at 20:10

Sami · Accepted Answer · 2020-01-27 21:03:52Z

1

You don't need to declare the scoped variable at all. Just pass the parameters from the function call to the method.

$(document).ready(function () {
    float("candy", 5000);
    float("candy2", 2000);

});

function float(ID, duration) {
    $('#' + ID).animate({
    top: 100,
  }, duration );
};

#candy {
  background-color: red;
  width: 200px;
  height: 200px;
  position: relative;
  }
 #candy2 {
  background-color: yellow;
  width: 200px;
  height: 200px;
  position: relative;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="candy"></div>
<div id="candy2"></div>
</div>

answered Jan 27, 2020 at 21:03

Sami

2,1201 gold badge15 silver badges27 bronze badges

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

2 Comments

willbeing Over a year ago

Thanks, Sami. I initially did this but ran into the following error:

TypeError: $('#' + ID).animate is not a function. (In '$('#' + ID).animate({         top: 100,     }, duration )', '$('#' + ID).animate' is undefined)

Sami Over a year ago

Are you using slim build of jQuery or the full version? The slim one doesn't include some of the functions, .animate being one of them.

Vishnu · Accepted Answer · 2020-01-27 20:11:26Z

0

I think you need the function like:

function float(ID) {
 let id = "#" + ID;
 $(id).animate({
    top: 100,
  }, 5000 );
}

answered Jan 27, 2020 at 20:11

Vishnu

8976 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery add function parameter or variable into id selector

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related