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

문제는 하나의 속성 (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>

는 당신이되고 싶어 길에 기능 바랍니다.