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")を追加するためのスペースを使用できることに注意してください。