Question

I have like 40 foo‘s on the page, and each one is assigned a left/top value in another function.

$('.foo').css({
  top: isOn ? current_top_value_here : 500,
  left: isOn ? current_left_value_here : 500
});

so, I want to leave the top & left properties unmodified if isOn is true. How can I do that?

Answer 1

This way you can ensure they are only added if it’s needed. Set up the object first with those values that you want assigned, and conditionally add some more. Then you can pass the object to your .css().

var cssProperties={
    'color' : 'yellow',
    ...
};

if (isOn) {
    cssProperties.top=500;
    cssProperties.left=500;
    /* alternative: $.extend(cssProperties, { 'top': 500, 'left': 500 }); */
}

$('.foo').css(cssProperties);