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

问题是，我只能通过标签列表选择一个属性（数据主题）。如何将其更改为数据ANY（或类似的东西），以使我的代码更具通用性？

Answer 1

为什么不将所有数据标签存储在变量中并循环它们？

＆＃13;

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

＆＃13;

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

＆＃13;

希望它按照你想要的方式运作。

jQuery - 按任何数据属性选择元素

1 个答案: