jQuery - выберите элемент по любому атрибуту данных

Question

Цените, если вы мне поможете. У меня есть код, который скрыть и показать элементы с конкретными данными, атрибутом, т.е.

У меня есть несколько меток списков

<div class="row no-width-margin" id="selector-theme"> 
    <h5 class="tag-title">Tag group 1</h5> 
     <ul class="tag-list"> 
     <li class="tag-list-item" data-theme="all-theme">All themes</li> 
     <li class="tag-list-item" data-theme="holidays-theme">Holidays</li> 
     <li class="tag-list-item" data-theme="spring-theme">Spring</li> 
     <li class="tag-list-item" data-theme="new-year-theme">New year</li> 
     </ul> 
</div> 
<div class="row no-width-margin" id="selector-sector"> 
    <h5 class="tag-title">Tag group 2</h5> 
    <ul class="tag-list" style="padding: 0"> 
     <li class="tag-list-item" data-sector="all-sector">All sectors</li> 
     <li class="tag-list-item" data-sector="cinema-sector">Movies</li> 
     <li class="tag-list-item" data-sector="entertainment-sector">Entertainment</li> 
    </ul> 
</div> 

и у меня есть несколько десятков элементов, как этот

<div class="file-box" data-theme="all-theme,holidays-theme" data-sector="all-sector,cinema-sector"> 
    <div class="file"> 
    <div class="image"> 
    </div> 
    <div class="file-name"> 
    </div> 
    </div> 
</div> 

и, конечно, jQuery

$('.tag-list-item').click(function() { 
       $(this).parent().find('.tag-list-item').each(function (i, elem) { 
        console.log(elem); 
        $(elem).removeClass('tag-list-chosen'); 
       }); 
       var param = $(this).data('theme').toString(); 
       $(this).addClass('tag-list-chosen'); 
       $('.file-box').each(function (i, elem) { 
        var params = $(this).data('theme').split(','); 
        if (params.indexOf(param.toString()) == -1) { 
         $(elem).fadeOut('slow'); 
        } else { 
         $(elem).fadeIn('slow'); 
        } 
       }); 
      }); 

Проблема в том, что я могу выбрать элемент только по одному атрибуту (данные me) через список тегов. Как я могу изменить его на data-ANY (или что-то вроде этого), чтобы сделать мой код более универсальным?

Answer 1

Почему бы не хранить все теги данных в переменной и не зацикливать их?

$('.tag-list-item').click(function() { 
 
    $(this).parent().find('.tag-list-item').each(function(i, elem) { 
 
     $(elem).removeClass('tag-list-chosen'); 
 
    }); 
 

 

 
    if ($.hasData(this)) { 
 
    \t var datas = $(this).data(); 
 
     var param; 
 
     for (var key in datas) { 
 
      param = datas[key]; 
 
     } 
 
    } 
 
    
 
    $(this).addClass('tag-list-chosen'); 
 
    $('.file-box').each(function(i, elem) { 
 
     var params = $(this).data('theme').split(','); 
 
     if (params.indexOf(param.toString()) == -1) { 
 
      $(elem).fadeOut('slow'); 
 
     } else { 
 
      $(elem).fadeIn('slow'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row no-width-margin" id="selector-theme"> 
 
    <h5 class="tag-title">Tag group 1</h5> 
 
    <ul class="tag-list"> 
 
     <li class="tag-list-item" data-theme="all-theme">All themes</li> 
 
     <li class="tag-list-item" data-theme="holidays-theme">Holidays</li> 
 
     <li class="tag-list-item" data-theme="spring-theme">Spring</li> 
 
     <li class="tag-list-item" data-theme="new-year-theme">New year</li> 
 
    </ul> 
 
</div> 
 
<div class="row no-width-margin" id="selector-sector"> 
 
    <h5 class="tag-title">Tag group 2</h5> 
 
    <ul class="tag-list" style="padding: 0"> 
 
     <li class="tag-list-item" data-sector="all-sector">All sectors</li> 
 
     <li class="tag-list-item" data-sector="cinema-sector">Movies</li> 
 
     <li class="tag-list-item" data-sector="entertainment-sector">Entertainment</li> 
 
    </ul> 
 
</div> 
 

 
<div class="file-box" data-theme="all-theme,holidays-theme" data-sector="all-sector,cinema-sector"> 
 
    <div class="file"> 
 
     <div class="image"> 
 
      image 
 
     </div> 
 
     <div class="file-name"> 
 
      filename 
 
     </div> 
 
    </div> 
 
</div>

Надеется, что он работает на том, как вы хотели, чтобы это было.