附加到按钮的几个功能

时间:2015-04-21 21:45:15

标签: javascript jquery html

我有一个名为"运行"的按钮。单击此运行按钮时会发生3个功能。但是我认为因为当点击这个按钮时有很多功能触发,它开始搞乱第三个功能似乎不起作用。

第一个函数检查是否有任何以名称开头的div" Drop"有类"错误",如果是,那么它会显示一个对话框

代码:

    $("#run").click(function() {
  if ($("[id^='Drop']").hasClass("wrong")) {
    $("#Incorrect").dialog("open");
  }
});

第二个功能检查是否有任何以" Drop"开头的Div。是空的,如果有一个空Div,它将显示对话框

代码:

$("#run").click(function(){       
    if ($("[id^='Drop']").is(":empty")){
     $("#Wrong2").dialog("open");
    };
});

如果没有类错误的div并且没有空div,则第三个函数将播放视频。

$("#run").click(function(){       
    if ($("[id^='Drop']").not(":empty") && $("[id^='Drop']").not(".wrong")){
     $('#map1').get(0).play();
    };
});

现在第1和第2功能都正常工作,但功能3不起作用。无论如何,视频只是忽略了条件和播放。我需要它才能在满足条件时播放

我知道这是设置这一切的可怕方式,我最近才开始使用jquery,所以如果有人能帮助我,我会非常感激。

4 个答案:

答案 0 :(得分:0)

欢迎来到混乱的javascript对象评估世界!

虽然有规律地说,一个空数组是假的,[] && [](当这两个语句都不成立时会发生这种情况)评估为true,因为事实上有两个对象。

我改为使用these方法之一来判断从jQuery选择器返回的两个数组是否为空,然后您的代码将按预期工作。

这应该有效:

if ($("[id^='Drop']").not(":empty").length === 0 && $("[id^='Drop']").not(".wrong").length === 0){
   $('#map1').get(0).play();
};

答案 1 :(得分:0)

请将所有内容置于单击事件下并更改此

 if ($("[id^='Drop']").not(":empty") && $("[id^='Drop']").not(".wrong")){
     $('#map1').get(0).play();

到这个

 $("div[id^='Drop']:not(:empty)").length && !$("div[id^='Drop']").hasClass('wrong') && $('#map1').get(0).play();

以下是演示:https://jsfiddle.net/erkaner/u4q9435q/1/

答案 2 :(得分:0)

试试这个:

$('#run').click(function(){
  var drp = $("[id^='Drop']");
  if(drp.hasClass('wrong'))$('#Incorrect').dialog('open');    
  if(drp.is(':empty'))$('#Wrong2').dialog('open');  
  if(drp.find('.wrong:empty').length === drp.find('.wrong').length){
    $('#map1').get(0).play();
  }
});

答案 3 :(得分:0)

我认为它可能就像这样简单:

$('#run').click(function(){
    var $drops = $("[id^='Drop']");
    if($drops.is('.wrong')) {
        $('#Incorrect').dialog('open');
    }
    else if($drops.is(':empty')) {
        $('#Wrong2').dialog('open');  
    }
    else {
        $('#map1').get(0).play();
    };
});