Javascript if hasclass，alert "yes"，否则alert "no“

Question

我正在创建一个多项选择测验，其中答案被拖放到div中。我想让它这样做，如果正确的答案被拖到div中，那么就会出现一个警告，说“是”。如果错误的答案被拖到div中，那么警报将显示"noh“。

我尝试过使用带有条件"hasClass“的if语句。有了正确的答案就有了正确的类。下面是我的代码：

​

$(function() {
  $(".ui-widget-content").draggable();
  $(".ui-widget-content2").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      if ($("div").hasClass("ui-widget-content") === true) {
        alert("Yeah");
      } else {
        alert("noh");
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<p>hello <span id="droppable" class="ui-widget-header"><span></span>
  </span>thank you</p>

<div id="draggable" class="ui-widget-content">
  <p>vrother</p>
</div>

<div id="draggable" class="ui-widget-content2">
  <p>sister</p>
</div>

<div id="draggable" class="ui-widget-content">
  <p>dude</p>
</div>

​

目前，if部分可以工作(当拖动正确答案时，警报会显示yeah )。但是，当错误的答案被拖到div上时，什么也不会发生。我相信我的else状态一定出了什么问题。

Answer 1

问题是，您没有针对您丢弃的div，尝试使用：

if($(ui.draggable).hasClass("ui-widget-content") === true) {
    alert("Yeah");
} else {
    alert("noh");
}

演示

​

$(function() {
  $(".draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      if ($(ui.draggable).hasClass("ui-widget-content2")) {
        console.log("Yeah");
      } else {
        console.log("noh");
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">



<div class="ui-widget-content draggable">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>



<div class="ui-widget-content ui-widget-content2 draggable">
  <p>Drag me to my target ui-widget-content2</p>
</div>

​

Answer 2

我认为问题来自于你在回调中硬编码了一个选择器：

if($( "div" ).hasClass

因为您的第一个div有这个类，所以您永远不会输入else语句。

您应该动态定义此选择器：

if($(ui.draggable).hasClass

​

$(function() {
  $(".ui-widget-content").draggable();
  $(".ui-widget-content2").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      if ($(ui.draggable).hasClass("ui-widget-content") === true) {
        alert("Yeah");
      } else {
        alert("noh");
      }
    }
  });
});

#droppable {
  display: inline-block;
  width: 300px;
  height: 15px;
  background: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<p>hello <span id="droppable" class="ui-widget-header"><span></span>
  </span>thank you</p>

<div id="draggable" class="ui-widget-content">
  <p>vrother</p>
</div>

<div id="draggable" class="ui-widget-content2">
  <p>sister</p>
</div>

<div id="draggable" class="ui-widget-content">
  <p>dude</p>
</div>

​