javascript - 使用数组作为类过滤器来检查元素是否具有在该数组中找到的类

Question

我知道这听起来有点令人困惑。这是我正在尝试做的事情:

我有五张照片，每张图片都有一组类，每次单击其中一张图片时，id(与类名相同)都会被推送到一个数组中。

最后，我只想显示包含在该数组中找到的相同类(id)的图片。

<div id="cameras" class="row text-center ">

    <div id="d5" class=" professional landscape wedding micro sportaction wildlife portrait astrophotographer cameras">
        <div class="thumbnail">
            <img src="images/d5.png" alt="D5">

        </div>
    </div>

    <div id="d810a" class=" professional landscape astrophotographer portrait micro cameras">
        <div class="thumbnail">
            <img src="images/d810a.png" alt="D3300">

        </div>
    </div>

    <div id="d810" class=" professional landscape wedding micro portrait cameras">
        <div class="thumbnail">
            <img src="images/d810.png" alt="D810">

        </div>
    </div>

    <div id="d750" class=" enthusiast landscape wedding micro sportaction wildlife portrait astrophotographer cameras">
        <div class="thumbnail">
            <img src="images/D750.png" alt="D750">
        </div>
    </div>
</div>
$('#sportaction').on('click', function () {

 if ($("#sportaction").attr('data-click-state') == 1) {
     $(this).attr('data-click-state', 0);

     $("#snaButton").css({ fill: "#00725C" });

 } else {
     $(this).attr('data-click-state', 1);

     $("#snaButton").css({ fill: "#00A388" })

 }

});
$("#finish").click(function() {
 $("[data-click-state= '0' ]").each(function () {
    type_array.push($(this).attr("id"));

    //some.push(this.id);
    });
 });

例如:如果我点击“爱好者”和“风景”，则只会显示 d750。

下面的代码不起作用。

$(".cameras").each(function () {
    $(this).hide();
    for (var i = 0; i < type_array.length; i++) {
        if ($(this).hasClass(type_array[i])) {
            $(this).show();

        }
    }
});

Answer 1

我不知道我是否正确理解你的问题，但试试这个？

var type_array = [];
$(".cameras").click(function() {
    var classArray = $(this).attr('class').split(/\s+/);
    $.each(classArray, function() {
        if (this.length > 0 && this != "cameras" && type_array.indexOf(this) == -1) {
            type_array[type_array.length] = this + "";
        }
    })
})        

以及其他地方:

    $(".cameras").each(function () {

    $(this).hide();
    var clicked = this;
      var hasAllClasses = true;
    $.each(type_array,function(){
       if($(clicked).hasClass(this)){
          return true;
       }
         hasAllClasses=false;
         return false;
    });
     if(hasAllClasses===true){
    $(clicked).show();
     }

});
type_array=[];