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'); 
        } 
       }); 
      }); 

問題は、私は1つの属性（data-the私は）タグリストを介して。コードをより普遍的なものにするために、データを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>

それはあなたがそれになりたかった道に機能し願っています。