Question

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

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

代码：

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

第二个功能检查是否有任何以＆＃34; Drop＆＃34;开头的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，所以如果有人能帮助我，我会非常感激。

Answer 1

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

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

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

这应该有效：

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

Answer 2

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

 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/

Answer 3

试试这个：

$('#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();
  }
});

Answer 4

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

$('#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();
    };
});

附加到按钮的几个功能

4 个答案: