javascript - 简单的 JS if 语句不起作用

Question

我有一个 if 语句，如果条件为真，则应该弹出一个警报窗口，但什么也不会发生。

这就像它没有获取变量的值，但变量却显示在名为 result 的 div 中。

JS:

$x = 0;

$(window).load(function () {
    $(".DragItem").draggable({
        revert: 'invalid',
        helper: "clone"
    });

    $(".drop1").droppable({
        accept: '#1',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {
            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop2").droppable({
        accept: '#2',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {
            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop3").droppable({
        accept: '#3',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {

            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop4").droppable({
        accept: '.DragItem',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {

            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
        }
    });
});

if ($x == 3) {
    // code to be executed if condition is true
    alert('Well Done');
} else {
    // code to be executed if condition is false
}

Answer 1

看起来您的条件仅在 droppables 启动后立即运行一次。您是否打算将其放入函数中并在每个 drop 回调中调用该函数？

function checkIfXEqualsThreeYet() {
    if ($x == 3) {
        // code to be executed if condition is true
        alert('Well Done');
    } else {
        // code to be executed if condition is false
    }
}

还有你的回调:

$x++;
checkIfXEqualsThreeYet();

你当然可以简化这个。要做的一件事可能是在函数内递增 x，即创建一个 incrementXAndCheckIfItEqualsThree()。也可能是这样的情况，您可以检查 DOM 并查看是否满足您的条件而不使用计数器，但我将把它留给您，因为只有您知道您的代码。无论如何，以上内容应该可以帮助您解决手头的问题。