代码不在函数内运行

Question

im having a weird problem with my JQuery code. Im trying to change a CSS attribute, to some element on the page.

this is the code that I tried runing and worked:

$("#player").css({
    "width" : "+=10"
});

My problem is when I try using this code from a function, it dosnt work.

this is the function:

   function change_elem_size (elemID,whatToChange,value) {
     $('#' + elemID).css({
        whatToChange : value
     });
   }

this is how I call the function:

function move_right (elemID,event) {
    $(document).keydown(function(event){
       change_elem_size(elemID,"width","+=10");
       });
}


    $(document).ready(function(){

      move_right("player",event);
    });

Why cant I use a function to change a css attribute?

(sorry for my english)

Answer 1

Why cant I use a function to change a css attribute?

You can. What you can't do is use a dynamic key for an object literal. That means when you do:

{
    whatToChange : value
}

it treats whatToChange as the name of the property , not as a variable that contains a value that should be the name of the property. You'll have to do this:

function change_elem_size (elemID,whatToChange,value) {
    var options = {}
    options[whatToChange] = value;
    $('#' + elemID).css(options);
}

Answer 2

The left-hand side of a property initializer inside an object initializer (the bit before the : ) is always a literal, never a variable. So this code:

function change_elem_size (elemID,whatToChange,value) {
    $('#' + elemID).css({
        whatToChange : value
    });
}

..sets the property whatToChange , it doesn't use the value of the variable to set a property name. To do that, don't use an object:

function change_elem_size (elemID,whatToChange,value) {
   $('#' + elemID).css(whatToChange, value);
}

...or optionally use an object, but use bracketed notation so that the value of whatToChange becomes the property name. To do that, you have to construct the object first, then add the property to it (you can't do it with an object initializer):

function change_elem_size (elemID,whatToChange,value) {
    var change = {};
    change[whatToChange] = value;
    $('#' + elemID).css(change);
}