如何在事件运行后运行函数?

时间:2014-01-22 19:47:27

标签: javascript jquery function events

我是所有编码的初学者。这是我的总目标。我正在运行一些比较简单的东西,我在屏幕上有8个超级英雄。我希望用户从屏幕上消除4个DC超级英雄,并且从屏幕上消除所有4个超级英雄之后,我希望系统提醒用户他们已经赢得了比赛。他们不必按任何顺序执行此操作,因此每次单击DC角色时都会运行superHero功能,以检查是否所有四个DC超级英雄都已被淘汰。有人请帮帮我。我觉得这很简单,我搞砸了。非常感谢。

/*This is my jquery that shows all 8 of my superheroes*/
$('#heroes').show();    
var flashHidden = !$('#greenlantern').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');     
function superHero() {
    if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
        alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
    }
}    
$('#flash').click(function(){
    $('#flash').hide('slow',function(){
        superHero();
    });
});    
$('#greenlantern').click(function(){
    $('#greenlantern').hide('slow',function(){
        superHero();
    });
});   
$('#batman').click(function(){
    $('#batman').hide('slow',function(){
        superHero();
    });
});
$('#superman').click(function(){
    $('#superman').hide('slow',function(){
        superHero();
    });
});
});

现在正在发生的事情是我将消除所有正确的超级英雄,它不会提醒我用户赢了。我尝试了很多不同的东西,而我得到的唯一其他结果就是让系统每次点击他们赢得的超级英雄时都会提醒用户这也是不正确的。

修改

这已通过将变量的范围更改为函数内部来解决。

2 个答案:

答案 0 :(得分:1)

您应该在函数中声明变量,即flashHidden。目前你正在开始设置。

function superHero() {
    var flashHidden = !$('#flash').is(':visible');
    var greenHidden = !$('#greenlantern').is(':visible');
    var batmanHidden = !$('#batman').is(':visible');
    var supermanHidden = !$('#superman').is(':visible'); 
    if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
        alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
    }
}

此外,您的点击处理程序可以压缩到

$('#flash, #greenlantern, #batman, #superman').click(function(){
    $(this).hide('slow',function(){
        superHero();
    });
});

答案 1 :(得分:0)

你正在设置......

var flashHidden = !$('#greenlantern').is(':visible');

......开头。但是,当它被隐藏时,你不会在以后更新该变量。所以根据你的检查:

if(flashHidden && batmanHidden && supermanHidden && greenHidden) {

... Flash仍然可见。尽管如此,是的,在他离开的页面上。

尝试添加此内容:

$('#flash').click(function(){
    $('#flash').hide('slow',function(){
        flashHidden=true;
        superHero();
    });
});