javascript - jquery隐藏具有相同数据值的图像

Question

我正在尝试编写一个网站，其目标是单击两个相同的图像，并且它隐藏了您设法相互匹配的两个图像。

$(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!");
      }
  });
 });

所以出错的地方显然是

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

但我无法找到隐藏这两个图像的方法，或者更好的方法......:/

http://jsfiddle.net/4vgfca76/

Answer 1

这并不像你想象的那样工作

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

当 data 与一个参数一起使用时，它会获取 data 属性，您在上面几行中执行此操作时应该已经知道该属性。

您得到的是字符串 hund 等，并且该字符串没有 hide() 方法。

您应该使用属性选择器来选择具有该属性的元素

$(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");
        }
    });
});