javascript - Javascript 如果有类，则提示“是”，否则提示“否”

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 部分有效（当拖动正确答案时，警报会显示是）。但是当错误的答案被拖到 div 上时，什么也没有发生。我相信我的 else 条件一定有问题。

标签： javascriptjqueryhtmlcss

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>