Как я могу превратить инструкцию if-else в тернарный оператор?

Question

у меня есть это:

if (THIS.target.hasClass('icon-false-shape')) { 
     $(this).addClass('white-font'); 
     if (THIS.answer === false) { 
      console.log('EVERYTHING COMES GREEN'); 
      $(this).addClass('background-green'); 
     } else { 
      $(this).addClass('background-red'); 
     } 
    } 
    if (THIS.target.hasClass('icon-true-shape')) { 
     $(this).addClass('white-font'); 
     if (THIS.answer === true) { 
      console.log('EVERYTHING COMES GREEN'); 
      $(this).addClass('background-green'); 
     } else { 
      $(this).addClass('background-red'); 
     } 
    } 

, который я пытаюсь превратить это:

$(this).addClass('background-' + ((THIS.target.hasClass('icon-false-shape') && THIS.answer === false) ? 'green' : 'red')) 
    .addClass('white-font'); 

    $(this).addClass('background-' + ((THIS.target.hasClass('icon-true-shape') && THIS.answer === true) ? 'green' : 'red')) 
    .addClass('white-font'); 

Но моя логика терпит неудачу.

Любые предложения?

Answer 1

Я хотел бы использовать $.toggleClass, который обрабатывает состояние внутри - см:

$(this).addClass('white-font'); 
$(this).toggleClass('background-green', THIS.answer === true); 
$(this).toggleClass('background-red', THIS.answer === true); 

Или ловить оба случая, перемещая условие в отдельной переменной:

var shouldBeGreen = THIS.target.hasClass('icon-false-shape') && THIS.answer === false; 
var shouldBeRed = THIS.target.hasClass('icon-true-shape') && THIS.answer === true; 
$(this).toggleClass('background-green', shouldBeGreen); 
$(this).toggleClass('background-red', shouldBeRed); 

Answer 2

Сначала мы обратили внимание на условия для будь то красный или зеленый (в этом случае я использую критерии: «красный»):

• (THIS.target.hasClass('icon-false-shape') && THIS.answer !== false)
• или (THIS.target.hasClass('icon-true-shape') && THIS.answer === false)

, если ни один из критериев не выполняется, это должно быть "зеленый".

$(this).addClass('white-font background-' + (((THIS.target.hasClass('icon-false-shape') && THIS.answer !== false) || (THIS.target.hasClass('icon-true-shape') && THIS.answer === false)) ? 'red' : 'green')); 

Также обратите внимание, что вы можете использовать пробел, чтобы добавить несколько классов $(this).addClass("white-font " + ...)" вместо этого $(this).addClass(...).addClass("white-font").