Как написать этот тернарный оператор с помощью jQuery?

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

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

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

Я знаю, что троица такая

x ? y: z

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

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

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

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

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

28
javascript jquery ternary

8 ответов

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

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/

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

55

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

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

скрипка wroking (новая снова):http://jsfiddle.net/6nar4/37/

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

4

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

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

LogicalORExpression ? AssignmentExpression : AssignmentExpression

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

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

3

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

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

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

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

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

2

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

1

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

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

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

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

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

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

Как правильно указали другие, первая часть Троицы должна вернуться 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'));

демо

0