jQuery css method won't accept function arguments

Question

so I created a function that has 2 arguments for the css method, I run it but the arguments are getting read. The width values work on hover off and on, but w/e value i pass through in the arguments are getting read

function growImg(targetClass, imgClass, growPosition, growVal){
    $(targetClass).hover(
      function(){
        $(imgClass).css({'width': '25rem', growPosition : growVal});            
      },
      function(){
        $(imgClass).css({'width' : '12em'});
      }
    )
  }

// Calling function here
growImg('.img-profile', '.profile-img', 'top', '25px')

Any help would be great

guest271314 · Accepted Answer · 2017-10-18 21:27:42Z

4

You can use computed property names

$(imgClass).css({'width': '25rem', [growPosition] : growVal});

You can alternatively use shorthand property names

function growImg(targetClass, imgClass, top){
    $(targetClass).hover(
      function(){
        $(imgClass).css({'width': '25rem', top});            
      },
      function(){
        $(imgClass).css({'width' : '12em'});
      }
    )
  }

// Calling function here
growImg('.img-profile', '.profile-img', '25px')

edited Oct 18, 2017 at 21:27

answered Oct 18, 2017 at 21:05

guest271314

1

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

Comments

War10ck · Accepted Answer · 2017-10-18 21:06:56Z

My guess is that the JavaScript is creating a key called growPosition and assigning the value of growVal to it. The reason being that JavaScript objects can be created without adding keys in quotes. There won't be a way for the parser to distinguish between a new object with a key called growPosition and the variable growPosition. Try using the object bracket syntax:

function growImg(targetClass, imgClass, growPosition, growVal){
    $(targetClass).hover(
        function(){
            var customCSS = { width: '25rem' };
            customCSS[growPosition] = growVal;

            $(imgClass).css(customCSS);            
        },
        function(){
            $(imgClass).css({'width' : '12em'});
        });
  }

// Calling function here
growImg('.img-profile', '.profile-img', 'top', '25px')

Collectives™ on Stack Overflow

jQuery css method won't accept function arguments

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related