I'm trying to make kind of quiz game using html, css, jquery, eventually javascript. At the moment i want to make if statement, to check if dropped element is dropped in the right div (city). I had an idea to make it with classes and check if they're the same. Is it event possible and proper?
My question is - how can I compare classes of two dives?
$(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>