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

看起来您的情况仅在启动了droppable后立即运行一次。您是否打算将其放入函数并在每个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，看看你的条件是否得到满足而不使用计数器，但我会留给你，因为只有你知道你的代码。无论如何，上述内容应该可以帮助您解决问题。

Answer 2

将if语句作为函数并添加了一个按钮来运行该函数。

<input type="button" onClick="Result()">

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

简单JS如果语句不起作用

2 个答案: