jQuery - Element durch ein beliebiges Datenattribut auswählen

Question

Schätzen Sie, wenn Sie mir helfen. Ich habe Code, der sich verstecken und zeigen Elemente mit spezifischen Daten-Attribut, das heißt

Ich habe paar Tag-Listen

<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> 

und ich habe Dutzende von Elementen wie diese

<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> 

und, natürlich, 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'); 
        } 
       }); 
      }); 

Das Problem ist, ich kann Element nur durch ein Attribut auswählen (Daten-die Ich) über Tag-Liste. Wie kann ich es zu Daten-ANY (oder etwas in der Art) ändern, um meinen Code universeller zu machen?

Answer 1

Warum speichern Sie nicht alle Daten-Tags in einer Variablen und durchlaufen sie?

$('.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>

Hoffe, dass es auf dem Weg Funktionen Sie es sein wollte.