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

首先我们关注条件为红色或绿色（在这种情况下，我使用标准为“red”）：

(THIS.target.hasClass('icon-false-shape') && THIS.answer !== false)
或，(THIS.target.hasClass('icon-true-shape') && THIS.answer === false)

如果没有符合条件，则应“green”。

$(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")。

如何将if-else语句转换为三元运算符？

2 个答案: