Appreciate if you help me. I have code which hide and show elements with specific data-attribute, ie
I have couple of tag-lists
<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>
and I have dozens of elements like this
<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>
and, of course, 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');
}
});
});
The problem is, I can select element by only one attribute (data-theme) via tag list . How can I change it to data-ANY (or something like this), to make my code more universal?
why not store all data tags in a variable and loop them?
$('.tag-list-item').click(function() { $(this).parent().find('.tag-list-item').each(function(i, elem) { $(elem).removeClass('tag-list-chosen'); }); if ($.hasData(this)) { 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>
Hope it functions on the way you wanted it to be.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.