使用jquery过滤图像

Question

我有类别[sports，naturel，animals]，如果我点击体育比data-id="sports" img必须出现而另一个数据ID必须隐身我怎么能去做 ？ in stackoverflow is my codes not appear correctly please click to see on codepen

和我的功能

$(document).ready(function(){

  $(".filter li").on("click",function(){
      var activeId = $(this).attr("id");

  });
});

这是基本的，我该如何改进呢？

Answer 1

$(document).ready(function(){

  // if you want to initially hide all the images then uncomment the following line
  //$("img[data-id]").hide(); 

  $(".filter li").on("click",function(){
      var activeId = $(this).attr("id");

      $("img[data-id]").hide();                      // hide all images that have the attribute data-id
      $("img[data-id = '" + activeId + "']").show(); // show the one with the data-id attribute equal to activeId
  });
});