Question

因此，我有一个带有各种选项的选择菜单，下面的图像根据我们在这些选项中的选择而相应更改。我设法使用此代码从stackoverflow获得帮助。

 $(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.categorias'); 

    row.hide()
    row.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();

         }
    })
    // In Addition to Wlin's Answer (For "All" value)
  if ("all" == filterValue) {
    row.show();
  }


});

这样可以很好地工作。只有一种“数据类型”。

<article class="portfolio-item categorias" data-type="desporto">

但是问题是某些文章具有2、3甚至4种类型，如果我添加另一种数据类型，他只会假设第一个。如何使一篇文章具有我想要的数据类型？

Answer 1

    row.each(function(i, el) {
         if($(el).attr('data-type').split(' ').indexOf(filterValue) !== -1) {
             $(el).show();

         }
    })

或

row.each(function(i, el) {
     if($(el).data('type').split(' ').indexOf(filterValue) !== -1) {
         $(el).show();

     }
})

Answer 2

我不确定您使用的是哪种数据结构，但据我所想，您可以将data-type作为用逗号分隔的类型列表（例如：data-type="type1,type2,type3"）和利用JavaScript代码的优点，可以使代码看起来更好：

$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.categorias'); 

    if ("all" == filterValue) {
        row.show();
    } else {
        row.each(function(i, el) {
            if ($(el).attr('data-type').contains(filterValue)) {
                $(el).show();
            } else {
                row.hide();
            }
        });
    }
});

2条相同的“数据类型”文章

2 个答案: