Использование квадратных скобок для объединения вещей в Javascript?

Кто-нибудь знает, почему это не работает?

$('#screen').css({
  'background-image': [bg_num == 1 ? 'josh' : 'jessi'] + '_background.jpg',
  'background-color': 'red'
 });

Цвет фона устанавливается, а изображения нет.

У меня не было большой практики использования квадратных скобок в Javascript, чтобы сделать такие вещи. У кого-нибудь есть советы, если я делаю что-то не так? Или нет красивого объяснения их использования?

РЕДАКТИРОВАТЬ: И просто для ясности, сама проверка действительно происходит, потому что, если я делаю то же самое в console.log(), выводит "josh_background.jpg" просто отлично. Он просто не использует эту функцию настройки css.


javascript jquery css concatenation square-bracket
person Ian Storm Taylor    schedule 12.01.2011    source источник
comment
Я запутался, что, по вашему мнению, означают скобки в Javascript (подсказка: они не эквивалентны скобкам)?   -  person Kirk Woll    schedule 12.01.2011

Ответы (1)


arrow_upward
6
arrow_downward

ИЗМЕНИТЬ:

Что вы делали, так это создавали литерал массива со значением 'josh' или 'jessi', а затем объединяли с ним '_background.jpg', чтобы технически это работало.

Проблема в том, что вам не хватает части 'url()' значения background-image.

'background-image': 'url(' + (bg_num == 1 ? 'josh' : 'jessi') + '_background.jpg)',

... но вы все равно должны использовать () для группировки вместо построения массива.

Исходный ответ:

Используйте круглые скобки для группировки вместо квадратных скобок:

'background-image': (bg_num == 1 ? 'josh' : 'jessi') + '_background.jpg',

Единственное использование квадратных скобок в javascript будет для получения/установки свойства объекта или для создания литерала массива:

var arr = []; // An Array literal

arr[10] = 'someArrValue'; // set index 10


var obj = {};  // A plain object literal

obj['prop'] = 'someObjValue';  // set the "prop" property

var key = 'prop2';

obj[key] = 'someOtherObjValue'; // set the property referenced in the "key" variable

...о, конечно, они используются в синтаксисе регулярных выражений...

person user113716    schedule 12.01.2011
comment
Обратите внимание, что ['jessi', 'josh'][bg_num] + '_background.jpg' тоже может работать :-) - person Pointy; 12.01.2011
comment
@Pointy: Верно. Несколько способов содрать шкуру с кошки. :о) - person user113716; 12.01.2011
comment
Все еще не могу заставить фон измениться на самом деле. - person Ian Storm Taylor; 12.01.2011
comment
@Ian: Только что понял, что ваш код должен технически работать, хотя круглые скобки были бы лучше. Проблема в том, что у вас нет url() части значения, необходимого для свойства background-image. Я обновил свой ответ. - person user113716; 12.01.2011
comment
Догадаться. Нужен URL (*) вокруг URL. - person Ian Storm Taylor; 12.01.2011
comment
Хотя у меня есть еще один вопрос: используя ту же идею со скобками, смогу ли я встроить условие переключения вместо тройного? - person Ian Storm Taylor; 12.01.2011
comment
@Ian: Да, меня отвлек массив, и я сначала пропустил настоящую проблему. Рад, что у тебя получилось. :о) - person user113716; 12.01.2011
comment
@Ian: Я не уверен, что понимаю, что ты имеешь в виду. Вы имеете в виду что-то вроде ((bg_num == 1 && 'josh') || 'jessi') ? - person user113716; 12.01.2011
comment
Ах, не беспокойтесь об этом, решил это гораздо проще. Как обычно, я дурак. - person Ian Storm Taylor; 13.01.2011