0

How can we change propertyName/s with ternary operators?

For example:

var horizontal = false,
    propertyName = horizontal ? 'left' : 'top';

$(".elem").css({
    propertyName: value
});

I've found some answers, but they do not fit to my circumstances.

https://stackoverflow.com/a/5973518/1250044

https://stackoverflow.com/a/12228404/1250044

Praveen Kumar has found a possibility. But yet still no final!

OK, I think the best answer is, as Explosion Pills Explosion Pills said:

var horizontal = false;

$(".elem").css(horizontal ? {
    left: 10
} : {
    top: 10
});

Live as Fiddle.

Community
  • 1
  • 1
yckart
  • 32,460
  • 9
  • 122
  • 129

2 Answers2

4

You cannot evaluate a variable when declaring an object in literal notation.

Instead, you can directly give it this way:

elem.css((horizontal ? 'left' : 'top'), value);

Fiddle: http://jsfiddle.net/YXyng/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 2
    Smart. I don't need it today, but this will be used in the future for one or more of my projects. – Ben Fransen Oct 12 '12 at 06:22
  • That's clear, I've put the ternary operator in a variable for more clarity... By the way: This does not work yet! http://jsfiddle.net/73hcs/ – yckart Oct 12 '12 at 06:27
  • Wait. Am trying it out too. :( Same issue. It worked someway, but not now. Now am getting `Uncaught SyntaxError: Unexpected token ILLEGAL`. Will soon update the answer and fiddle. :) – Praveen Kumar Purushothaman Oct 12 '12 at 06:30
  • @PraveenKumar I saw your reply... Any ideas how to get it to work with multiple properties? – yckart Oct 12 '12 at 06:36
  • @yckart Unfortunately, No buddy, you can't do that way in case of JSON. It is not JavaScript. :( – Praveen Kumar Purushothaman Oct 12 '12 at 06:37
  • JSON standard! :P Will suggest them too! Good idea. – Praveen Kumar Purushothaman Oct 12 '12 at 06:41
  • @PraveenKumar I'm sorry... But I can't accept that there's no perfect answer! I've updated my question... – yckart Oct 12 '12 at 06:53
  • 1
    Okat @yckart I will try some more, to get some working stuff. If not, then you have to work with how JSON is built! – Praveen Kumar Purushothaman Oct 12 '12 at 06:55
  • I don't see any JSON in here. I only see Object Literal Notation. JSON is a data transmission format, so technically you can't speak of json when writing javascript. – Christoph Oct 12 '12 at 07:08
  • @Christoph Did you understand what the question was? He wants to give a field name from a Javascript expression on JSON, which I tried, but it didn't work. Rather, I gave him a working alternate solution. Now can you explain why the downvote, when there is no talk about JSON? – Praveen Kumar Purushothaman Oct 12 '12 at 07:11
  • I am the downvoter, and i downvoted because you used wrong terminology and where right by accident. – Christoph Oct 12 '12 at 07:21
  • the problem is not the expression as the ternary operator is properly evaluated and the result stored in `propertyName`. The problem is that `{propertyName:value}` in this **Literal Notation** won't evaluate the variable but will create a property called `propertyName` instead of `left` or `top`. – Christoph Oct 12 '12 at 07:27
  • Right, I know that. And that's what I have explained him and updated the answer accordingly. See my previous comments. And yeah, it is **not** possible to do in JSON. Right? And `.css()` with multiple values takes JSON. Now what? – Praveen Kumar Purushothaman Oct 12 '12 at 07:31
  • 1
    @PraveenKumar I didn't mean to offend you. I just wanted to point out that `Java Script Object Notation` "per accident" looks like the Literal Notation used in javascript but has nothing to do with javascript (like JAVAscript has nothing to do with java). `css()` takes no JSON, it takes an (javascript)-object as parameter. In which notation this object is created doesn't matter. (Instead of the Literal Notation you can use a constructor or add properties directly via dot or bracket-notation) – Christoph Oct 12 '12 at 09:33
  • @Christoph I know. I understand. Thanks, and yeah, I didn't get offended. – Praveen Kumar Purushothaman Oct 12 '12 at 09:34
1

You cannot directly hand over a variable value as identifier for an objectproperty but you can do the following:

var value = "15px";
var horizontal = true;
var propertyName = horizontal ? 'left' : 'top';
var parameters = {};
parameters[propertyName] = value;

elem.css(parameters);

See it live in this fiddle.

Christoph
  • 50,121
  • 21
  • 99
  • 128