Как записать условие тернарного оператора в jQuery?

В этой скрипке http://jsfiddle.net/mjmitche/6nar4/3/, если вы, например, перетащите маленький синий прямоугольник в желтый, большой черный ящик станет розовым. Все 4 ящика слева можно перетащить в ящики внутри черного ящика.

В конце скрипки вы видите код, который меняет черный ящик на розовый.

Однако я хочу сделать это троичным оператором, чтобы, если поле было черным, оно становилось розовым, а если оно стало розовым, то я хочу, чтобы оно снова стало черным.

Я знаю, что это троичный

x ? y: z

Так что я попробовал это, хотя я знал, что это, вероятно, не правильно

$("#blackbox").css({'background':'pink'}); ?

    $("#blackbox").css({'background':'black'}); : 

$("#blackbox").css({'background':'pink'});

Я думаю, что первая строка перед знаком вопроса вызывает проблему, так как создать оператор if?

Ответы

Ответ 1

Я бы пошел с таким кодом:

var oBox = $("#blackbox");
var curClass = oBox.attr("class");
var newClass = (curClass == "bg_black") ? "bg_pink" : "bg_black";
oBox.removeClass().addClass(newClass);

Чтобы он работал, сначала нужно изменить свой CSS и удалить background из объявления #blackbox, добавить эти два класса:

.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }

И сначала назначьте класс bg_black элементу blackbox.

Обновлен jsFiddle: http://jsfiddle.net/6nar4/17/

По-моему, это более читаемо, чем другие ответы, но это зависит от вас, чтобы выбрать, конечно.

Ответ 2

Я бы сделал (добавил кеширование):

var bbx = $("#blackbox");
 bbx.css('background-color') === 'rgb(255, 192, 203)' ? bbx.css('background','black') : bbx.css('background','pink')

wroking fiddle (new AGAIN): http://jsfiddle.net/6nar4/37/

Мне пришлось изменить первый оператор, так как css() возвращает значение rgb цвета

Ответ 3

Я думаю, что у Дэна и Никола есть подходящий исправленный код, однако вы можете не понимать, почему исходный код не работает.

То, что здесь называется "тройным оператором", называется условным оператором в разделе 11.12 ECMA-262. Он имеет форму:

LogicalORExpression ? AssignmentExpression : AssignmentExpression

Вычисляется логическое выражение, а возвращаемое значение преобразуется в значение Boolean (как выражение в условии if). Если он оценивает значение true, то вычисляется первое выражение AssignmentExpression и возвращается возвращаемое значение, в противном случае второе вычисляется и возвращается.

Ошибка в исходном коде - это дополнительные полуколоны, которые меняют попытку условного оператора на ряд операторов с синтаксическими ошибками.

Ответ 4

Тернарный оператор просто записывается как логическое выражение, за которым следует вопросительный знак, а затем еще два выражения, разделенные двоеточием.

Первое, что я вижу, что вы ошибаетесь, это то, что ваше первое выражение не возвращает логическое или что-нибудь разумное, которое может быть преобразовано в логическое. Ваше первое выражение всегда будет возвращать объект jQuery, который не имеет разумной интерпретации в качестве логического и то, что он преобразует, вероятно, является неизменной интерпретацией. Вам всегда лучше возвращать то, что имеет хорошо известную булевскую интерпретацию, если не указано иное для удобства чтения.

Во-вторых, вы ставите точку с запятой после каждого из ваших выражений, что неверно. По сути, это говорит о "конце конструкции", и поэтому разбивает трёхмерный оператор.

В этой ситуации, хотя вы, вероятно, можете сделать это более простым способом. Если вы используете классы и метод toggleClass, вы можете легко заставить его включать и выключать класс, а затем вы можете поместить свои стили в это определение класса (Kudos to @yoavmatchulsky за предложение использовать классы там в комментариях).

Сценарий этого находится здесь: http://jsfiddle.net/chrisvenus/wSMnV/ (на основе оригинала)

Ответ 5

Тернарный оператор работает, потому что первая его часть возвращает логическое значение. В вашем случае метод jQuery css возвращает объект jQuery, поэтому недействителен для тройной операции.

Ответ 6

Похоже, что вы пытаетесь сделать, toggle может лучше решить вашу проблему.

EDIT: Извините, переключатель - это просто видимость, я не думаю, что это поможет вашему переключению цвета bg.

Но здесь вы идете:

var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});

Ответ 7

Кроме того, тернарный оператор ожидает выражения, а не выражения. Не используйте точки с запятой, только в конце тройной операции.

$("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});

Ответ 8

Как правильно указали другие, первая часть тройки должна возвращать true или false, а в вашем вопросе возвращаемое значение является объектом jQuery.

Проблема, которая может возникнуть в сравнении, заключается в том, что веб-цвет будет конвертирован в RGB, поэтому вам придется текст для этого в тернарное состояние.

Итак, с CSS:

#blackbox {
    background:pink;
    width:10px;
    height:10px;
}

Следующий jQuery перевернет цвет:

var b = $('#blackbox');
b.css('background', (b.css('backgroundColor') === 'rgb(255, 192, 203)' ? 'black' : 'pink'));

Демо

Ответ 9

Простой способ реализовать троичный оператор в jquery.

var  ptestName = $("#Test-type").data("kendoComboBox").text();
pTestName=(pTestName == "All Types") ? "All" : ptestName;