JQuery 检查类是不是匹配

Posted

技术标签:

【中文标题】JQuery 检查类是不是匹配【英文标题】：JQuery checking if classes matchesJQuery 检查类是否匹配 【发布时间】：2020-05-28 15:20:16 【问题描述】：

我正在尝试使用 html、css、jquery，最终使用 javascript 来制作一种问答游戏。 目前我想做 if 语句，以检查丢弃的元素是否被丢弃在正确的 div （城市）中。我有一个想法，用类来做，并检查它们是否相同。它是可能的和适当的吗？

我的问题是 - 我如何比较两次潜水的课程？

$(function() 
  $("#answers div").draggable();
  $("#box div").droppable(
    drop: function(event, ui) 
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    
  );
);
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>QUIZ</title>
  <link href='style.css' rel='stylesheet'>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <h1>QUIZ</h1>
  <div id="answers">
    <div class="barcelona">
      <p> Antoni Gaudi </p>
    </div>
    <div class="paris">
      <p> Champ Elysees </p>
    </div>
    <div class="london">
      <p> Tate Modern </p>
    </div>
    <div class="barcelona">
      <p> Sagrada Familia </p>
    </div>
    <div class="paris">
      <p> Montmartre </p>
    </div>
    <div class="ny">
      <p> Fifth Avenue </p>
    </div>
    <div class="barcelona">
      <p> Paella </p>
    </div>
    <div class="barcelona">
      <p> La Rambla </p>
    </div>
    <div class="london">
      <p> Piccadilly Circus </p>
    </div>
    <div class="paris">
      <p> Mona Lisa </p>
    </div>
    <div class="ny">
      <p> Empire State Building </p>
    </div>
    <div class="ny">
      <p> Broadway </p>
    </div>
    <div class="paris">
      <p> Musée d'Orsay </p>
    </div>
    <div class="ny">
      <p> Wall Street </p>
    </div>
    <div class="london">
      <p> Camden Town </p>
    </div>
    <div class="ny">
      <p> Big Apple </p>
    </div>
    <div class="barcelona">
      <p> La Boqueria </p>
    </div>
  </div>


  <div id="box">
    <div class="paris">
      <p> PARIS </p>
    </div>
    <div class="ny">
      <p> NY </p>
    </div>
    <div class="london">
      <p> LONDON </p>
    </div>
    <div class="barcelona">
      <p> BARCELONA </p>
    </div>
</body>

</html>

【问题讨论】：

最好使用单独的data-city 属性。一个元素可以有多个类。 【参考方案1】：

摘自 droppable 的 jQuery UI API 文档：

drop(事件, ui)

事件 用户界面 可拖动： 代表可拖动元素的 jQuery 对象。 帮手： 一个 jQuery 对象，表示正在拖动的助手。 位置： 可拖动助手的当前 CSS 位置为 top, left 对象。 偏移量： 可拖动助手的当前偏移位置为 top, left 对象。

您已经知道this 是可放置的，现在您也可以访问draggable。 jQuery 所称的helper 是光标后面的元素。默认情况下，它们是相同的，但您可以让可拖动对象保持原位，直到您放下它，而幽灵般的克隆跟随您的光标。

虽然您可以为可拖动对象提供一个类，然后在 drop 事件中使用类似这样的方式检查它...

const categories = ["paris", "ny", "london", "barcelona"];

$(function() 
  $("#answers div").draggable();
  $("#box div").droppable(
    drop: function(event, ui) 
      const $this = $(this);
      
      if (categories.some(c => $this.hasClass(c) && ui.draggable.hasClass(c))) 
        $this
          .addClass("ui-state-highlight")
          .find("p")
          .html("Valid :)");
       else 
        $this
          .addClass("ui-state-highlight")
          .find("p")
          .html("Invalid :(");
            
    
  );
);
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>QUIZ</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <h1>QUIZ</h1>
  <div id="answers">
    <div class="barcelona">
      <p> Antoni Gaudi </p>
    </div>
    <div class="paris">
      <p> Champ Elysees </p>
    </div>
    <div class="london">
      <p> Tate Modern </p>
    </div>
    <div class="ny">
      <p> Fifth Avenue </p>
    </div>
  </div>

  <div id="box">
    <div class="paris">
      <p> PARIS </p>
    </div>
    <div class="ny">
      <p> NY </p>
    </div>
    <div class="london">
      <p> LONDON </p>
    </div>
    <div class="barcelona">
      <p> BARCELONA </p>
    </div>
  </div>
</body>

</html>

不过，我建议从长远考虑。最终，我想你会想要在 JavaScript 中存储谜题。

[
   category: "Paris", answers: ["Champ Elysees", "Montmartre"] ,
   category: "NY", answers: ["Big Apple", "Broadway"] 
]

然后您可以自动为拼图构建 HTML，并将 draggable 和 droppable 小部件存储在每个类别中。像这样的：

categories.forEach(c => 
  c.droppable = createDroppable(c.category);
  c.draggables = c.answers.map(answer => createDraggable(answer));
);

然后您可以通过身份比较可拖动和可放置，而不依赖于属性。我对 jQuery 不是很熟悉，但我相信这可以通过 is 方法完成。

// in the drop event
const category = categories.find(c => $(this).is(c.droppable));
if (category.draggables.some(answer => ui.draggable.is(answer)) 
  // this answer is valid!

【讨论】：

【参考方案2】：

您可以使用ui.draggable 查找类并检查其是否包含在当前元素中：

$( function() 
  $( "#answers div" ).draggable();
  $( "#box div" ).droppable(
    drop: function( event, ui ) 
      var dropped = $(this).attr('class').split(' ')[0];
      if(ui.draggable.attr('class').split(' ').includes(dropped))
        $( this )
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
       
    
  );
);
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<h1>QUIZ</h1>


<div id = "answers">
  <div class = "barcelona"><p> Antoni Gaudi </p></div>
  <div class = "paris"><p> Champ Elysees </p></div>
  <div class = "london"><p> Tate Modern </p></div>
  <div class = "barcelona"><p> Sagrada Familia </p></div>
  <div class = "paris"><p> Montmartre </p></div>
  <div class = "ny"><p> Fifth Avenue </p></div>
  <div class = "barcelona"><p> Paella </p></div>
  <div class = "barcelona"><p> La Rambla </p></div>
  <div class = "london"><p> Piccadilly Circus </p></div>
  <div class = "paris"><p> Mona Lisa </p></div>
  <div class = "ny"><p> Empire State Building </p></div>
  <div class = "ny"><p> Broadway </p></div>
  <div class = "paris"><p> Musée d'Orsay </p></div>
  <div class = "ny"><p> Wall Street </p></div>
  <div class = "london"><p> Camden Town </p></div>
  <div class = "ny"><p> Big Apple </p></div>
  <div class = "barcelona"><p> La Boqueria </p></div>
</div>


<div id = "box">
  <div class = "paris"><p> PARIS </p></div>
  <div class = "ny"><p> NY </p></div>
  <div class = "london"><p> LONDON </p></div>
  <div class = "barcelona"><p> BARCELONA </p></div>
</div>

虽然最好使用评论中建议的自定义属性：

$( function() 
  $( "#answers div" ).draggable();
  $( "#box div" ).droppable(
    drop: function( event, ui ) 
      var dropped = $(this).data('city');
      if(ui.draggable.data('city') == dropped)
        $( this )
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
       
    
  );
);
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<h1>QUIZ</h1>


<div id = "answers">
  <div data-city="barcelona"><p> Antoni Gaudi </p></div>
  <div data-city="paris"><p> Champ Elysees </p></div>
  <div data-city="london"><p> Tate Modern </p></div>
  <div data-city="barcelona"><p> Sagrada Familia </p></div>
  <div data-city="paris"><p> Montmartre </p></div>
  <div data-city="ny"><p> Fifth Avenue </p></div>
  <div data-city="barcelona"><p> Paella </p></div>
  <div data-city="barcelona"><p> La Rambla </p></div>
  <div data-city="london"><p> Piccadilly Circus </p></div>
  <div data-city="paris"><p> Mona Lisa </p></div>
  <div data-city="ny"><p> Empire State Building </p></div>
  <div data-city="ny"><p> Broadway </p></div>
  <div data-city="paris"><p> Musée d'Orsay </p></div>
  <div data-city="ny"><p> Wall Street </p></div>
  <div data-city="london"><p> Camden Town </p></div>
  <div data-city="ny"><p> Big Apple </p></div>
  <div data-city="barcelona"><p> La Boqueria </p></div>
</div>


<div id="box">
  <div data-city="paris"><p> PARIS </p></div>
  <div data-city="ny"><p> NY </p></div>
  <div data-city="london"><p> LONDON </p></div>
  <div data-city="barcelona"><p> BARCELONA </p></div>
</div>

【讨论】：

以上是关于JQuery 检查类是不是匹配的主要内容，如果未能解决你的问题，请参考以下文章

如何检查选择器是不是匹配 jQuery 中的某些内容？ [复制]

jQuery 属性操作

jQuery 属性操作方法

如何检查字符串是不是与 Thymeleaf 中的正则表达式匹配？

常用jQuery方法

如何扩展我的方法来检查 2 张卡是不是匹配到 3 张匹配的卡？