CODEWITHSUNDEEP
javascripthtmljquerycss
buzz
buzz

Reputation: 1106

Checking two selected divs has the same class or not

I'm trying to make a matching game where a player has to select two same cards or divs. I took two parent divs and each parent div has eight child divs. And both of the parents child divs has the same class for matching purpose. Each time browser is reloaded the child divs are rearranged randomly. I used jquery to get the class names after the divs are clicked and saved it into two variables and later matched those variables. If they are equal that means user has got a match. But my conditions are not working as expected. I'm getting a "match" message even before the cards are selected. Also even after selecting two cards I'm not getting any message.

here's my code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
  <div class="parent1">
    <div id="1" class="block1 c1">1</div>
    <div id="2" class="block1 c2">2</div>
    <div id="3" class="block1 c3">3</div>
    <div id="4" class="block1 c4">4</div>
    <div id="5" class="block1 c5">5</div>
    <div id="6" class="block1 c6">6</div>
    <div id="7" class="block1 c7">7</div>
    <div id="8" class="block1 c8">8</div>
  </div>

  <div class="parent2">
    <div id="11" class="block2 c1">1</div>
    <div id="22" class="block2 c2">2</div>
    <div id="33" class="block2 c3">3</div>
    <div id="44" class="block2 c4">4</div>
    <div id="55" class="block2 c5">5</div>
    <div id="66" class="block2 c6">6</div>
    <div id="77" class="block2 c7">7</div>
    <div id="88" class="block2 c8">8</div>
  </div>

  <script src="main.js"></script>
  
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");

.parent1,
.parent2 {
  height: 100px;
  width: 100%;
  border: 1px solid grey;
  overflow: hidden;  
  display: flex;
}

.parent1 div,
.parent2 div {
  flex-basis: 100%;
}

.block1,
.block2 {
  height: 100px;
  color: white;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Merriweather, serif;
}

.c1 {
  background-color: #F44336;
}

.c2 {
  background-color: #E91E63;
}

.c3 {
  background-color: #8E24AA;
}

.c4 {
  background-color: #5E35B1;
}

.c5 {
  background-color: #1E88E5;
}

.c6 {
  background-color: #00796B;
}

.c7 {
  background-color: #AFB42B;
}

.c8 {
  background-color: #FF8F00;
}

JS

//shuffle position of cards

$.fn.shuffleChildren = function() {
  $.each(this.get(), function(index, el) {
      var $el = $(el);
      var $find = $el.children();

      $find.sort(function() {
          return 0.5 - Math.random();
      });

      $el.empty();
      $find.appendTo($el);
  });
};

$(".parent1").shuffleChildren();
$(".parent2").shuffleChildren();

var id1;
var id2;

$(".block1").hover(function(){
  $(this).css("border", "1px solid white");
}, function(){
  $(this).css("border", "none");
});

$(".block2").hover(function(){
  $(this).css("border", "1px solid white");
}, function(){
  $(this).css("border", "none");
});


$(".block1").click(function(){
  var id1 = $(this).attr('class').split(' ')[1];
  console.log(id1);
})
$(".block2").click(function(){
  var id2 = $(this).attr('class').split(' ')[1];
  console.log(id2);
})

if (id1==id2) {
  console.log("match")
} else {
  console.log("not match")
}

I tried putting the whole matching thing in a function and later called it. But the problem remains same.

EDIT The id in HTML are not being used anywhere in the code. I had added them for matching purpose but later switched to class matching.

Upvotes: 0

Views: 124

Answers (2)

epascarello
epascarello

Reputation: 207557

Using data attributes would simplify this.

<div id="1" class="block1" data-type="c1">1</div>

Now to get the type, you reference it with data or dataset

const selectedType = $(this).data('type');

and with CSS you can use

[data-type="c1"] { }

Now you have to do the comparisons inside of the click.

var attempts = 0;
$("[data-type]").on("click", function() {
  var elem = $(this);
  if (elem.hasClass("matched")) {
    return;
  }
  
  elem.toggleClass("selected");
  elem.siblings(".selected").removeClass("selected");

  var selected = $("[data-type].selected");
  if (selected.length === 2) {
    var type1 = selected.eq(0).data("type");
    var type2 = selected.eq(1).data("type");
    var isMatch = type1 === type2;
    selected.removeClass("selected").toggleClass("matched", isMatch);
    attempts++;
    console.log(attempts);
  }

});
[data-type] {
  border: 1px solid #CCC;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 5px;
}

[data-type].selected,
[data-type].selected:hover {
  border: 1px solid black;
}

[data-type]:hover {
  border: 1px solid #000;
}

[data-type="c1"] {
  background-color: #CFC;
}

[data-type="c2"] {
  background-color: #CAB;
}

[data-type].matched {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent1">
  <div class="block1" data-type="c1">1</div>
  <div class="block1" data-type="c2">2</div>
</div>

<div class="parent2">
  <div class="block2" data-type="c1">1</div>
  <div class="block2" data-type="c2">2</div>
</div>

Upvotes: 1

chad_
chad_

Reputation: 3819

While it is true that you should probably consider using data attributes instead of what you're doing... in the context of your code, you are re-declaring id1 and id2 in your click handlers. Something like this should work:

//shuffle position of cards

$.fn.shuffleChildren = function() {
  $.each(this.get(), function(index, el) {
      var $el = $(el);
      var $find = $el.children();

      $find.sort(function() {
          return 0.5 - Math.random();
      });

      $el.empty();
      $find.appendTo($el);
  });
};

$(".parent1").shuffleChildren();
$(".parent2").shuffleChildren();

var id1;
var id2;

$(".block1").hover(function(){
  $(this).css("border", "1px solid white");
}, function(){
  $(this).css("border", "none");
});

$(".block2").hover(function(){
  $(this).css("border", "1px solid white");
}, function(){
  $(this).css("border", "none");
});

$(".block1").click(function(){
  id1 = $(this).attr('class').split(' ')[1];
  console.log(id1);
  checkMatch();
})
$(".block2").click(function(){
  id2 = $(this).attr('class').split(' ')[1];
  console.log(id2);
  checkMatch();
})

function checkMatch() {
    var answer = id1 === id2;
    console.log(answer ? 'match' : 'no match');
  return answer;
}

Upvotes: 1

Related Questions