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条件一定有问题。

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>

Javascript如果hasclass，警告“是”，否则警告“否”

2 个答案: