CODEWITHSUNDEEP
javascriptjquery
eddvedd
eddvedd

Reputation: 17

Hiding images with same data value jquery

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.

$(document).ready(function(){
    var animal1;
    var animal2;
  $(".memory1").on("click", function(){  
      animal1 = $(this).data('animal');
  });

    $(".memory2").on("click", function(){  
      animal2 = $(this).data('animal');
      if (animal1==animal2){
         $(this).data('animal').hide();          
      }
      else {
          alert("Wrong, Try again!");
      }
  });
 });

so the line where its going wrong is obviously 

$(this).data('animal').hide();

But I cant figure out a way to hide both images, or a better way of going about it.. :/

http://jsfiddle.net/4vgfca76/

Upvotes: 0

Views: 20

Answers (1)

adeneo
adeneo

Reputation: 318182

This doesn't work the way you think it does

$(this).data('animal').hide();

When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.

What you get is the string hund etc. and that string doesn't have a hide() method.

You should be using the attributes selector to select the elements with that attribute instead

$(document).ready(function () {
    var animal1, animal2;

    $(".memory1").on("click", function () {
        animal1 = $(this).data('animal');
    });

    $(".memory2").on("click", function () {
        animal2 = $(this).data('animal');

        if (animal1 == animal2) {
            $('img[data-animal="'+animal1+'"]').hide();
        } else {
            alert("Fel! Försök igen");
        }
    });
});

Upvotes: 1

Related Questions