CODEWITHSUNDEEP
jquery
Travis Michael Heller
Travis Michael Heller

Reputation: 1248

How to make a function dynamic by passing in a different #id per use?

I am trying to reuse this function but make it so i can pass a different selector instead of having to write the function multiple times for different a selector name each time.

Here is what i have so far with my code. If you look at my code i want to change the Var elem. so i could pass in 'about' and it would change the var elem to $("about-slide .animate"). I hope this makes since. 

    function animateLight() {
    var elem = $("#solutions-slide .animate");
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

Upvotes: 0

Views: 62

Answers (3)

mand
mand

Reputation: 432

There are a couple of neat ways of solving this problem, one way is using an enum and a switch statement.

var SELECTOR_ENUM = { solutions: 0, about: 1 };

function animateLight(selector) {
    var suffix = "-slide .animate";
    switch( selector ) {
        case 0:
            elem = $( "#solutions" + suffix );
        break;
        case 1:
            elem = $( "#about" + suffix );
        break;
        //you see where im going...
        default:
            elem = $( "#solutions" + suffix );
        break;
    }
        //the rest of your code
}

I know it is more code but this is very scalable, just add new selectors to the enum and switch statement and your ready to go. The best part is you don't have to type the selector every time you call the function, minimizing the chance of errors occurring. Although, if you are going to use the selectors in more than one function, I would suggest using an array or dictionary to hold all your selectors in one place.

Upvotes: 0

faino
faino

Reputation: 3224

Something like this sounds like what you're looking for:

function animateLight(prefix) {
    var elem = $("#" + prefix + "-slide .animate");
    elem.fadeIn();
    setInterval(function(){
        elem.animate({
            opacity: "-=0.1"
        }, 200 , function() {
            if(elem.css("opacity") <= 0.5){
            $(this).css({
                opacity: '1'
            });
        }
    });
    },50);
}

Upvotes: 1

Avitus
Avitus

Reputation: 15958

I would change it to be:

You can then call this function by doing animateLight("solutions");

function animateLight(controlid) {
    var elem = $("#" + controlid + "-slide .animate");
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

Or you can modify it to be the whole selector to be:

You can then call it by doing animateLight("#solutions-slide .animate")

function animateLight(selector) {
    var elem = $(selector);
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

Upvotes: 2

Related Questions