SO Help

by Wesley Smith

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<h1>Play game!</h1>
<div data-select-id="gameboard">
  <div class="pic-row1">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble" class="pictures" data-select-id="santabeatdown">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
  </div>
  <div class="pic-row2">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble santabeatdown" class="pictures">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
  </div>
  <div class="pic-row3">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
  </div>
  <div class="pic-row4">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}*/

.pictures {
  width: 180px;
  height: 180px;
}

JavaScript

$(document).ready(function() { 

  $(".pictures").click(function() {
    var $this = $(this).addClass('selected'); // add selected class and get the clicked element
    var $lastSelected = $('.selected').not($this); 
    if($lastSelected.length > 0){
        var thisId = $this.data('select-id');
        var lastId = $lastSelected.data('select-id');
        console.log(thisId , lastId);
        if(thisId == lastId){
        	$('[data-select-id="' + thisId + '"]').hide();
        }
        $('.selected').removeClass('selected');
    }
  });
});