如何 select 从属性除以逗号

Question

我有这个选择器：

<div class="filterMenu">
<label data-id="5"></label>
<label data-id="2"></label>
</div>

<div class="galeria">
<div data-categories="5,2"></div>

<div data-categories="2,6"></div>
</div>

这就是我正在尝试的方式

$('.filterMenu label').on('click', function () {
            var id = $(this).data('id');
            $('.galeria > div').hide();
            $('.galeria > div').each(function () {
                var gid = String($(this).data('categories'));
                var gidt = gid.split(',');
                for ( var i = 0; i < gidt.length; i++) {
                    if ( gidt[i] == gid ) {
                        $(this).show();
                    }
                }
            });
        });

但它不会正确过滤，

有什么想法吗？

Answer 1

Try this
var gid = $(this).attr('data-categories');

Answer 2

您可以尝试这样的操作：

$('.filterMenu label').on('click', function () {
    var id = $(this).data('id');
    $('.galeria > div').hide();
    $('.galeria > div[data-categories*="'+id+'"]').show();
});

Answer 3

你的代码不应该是：

if (gidt[i] == id) {
  $(this).show();
}

而不是：

if (gidt[i] == gid) {
  $(this).show();
}

Answer 4

您的 ID 检查存在拼写问题，但您可以将其简化为

var $galerias = $('.galeria > div');
$('.filterMenu label').on('click', function() {
  var id = $(this).data('id') + '';
  $galerias.each(function() {
    var $this = $(this);
    var gidt = ($this.data('categories') + '').split(',');
    $this.toggle(gidt.indexOf(id) > -1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filterMenu">
  <label data-id="5">5</label>
  <label data-id="2">2</label>
</div>
<hr />
<div class="galeria">
  <div data-categories="5,2">5,2</div>
  <div data-categories="2,6">2,6</div>
  <div data-categories="6">6</div>
  <div data-categories="5">5</div>
  <div data-categories="2">2</div>
  <div data-categories="2,5,6">2,5,6</div>
</div>

或者

var $galerias = $('.galeria > div');
$('.filterMenu label').on('click', function() {
  var id = $(this).data('id');
  $galerias.each(function() {
    var $this = $(this);
    var gidt = $this.data('categories');
    $this.toggle(gidt.indexOf(id) > -1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filterMenu">
  <label data-id="5">5</label>
  <label data-id="2">2</label>
</div>
<hr />
<div class="galeria">
  <div data-categories="[5,2]">5,2</div>
  <div data-categories="[2,6]">2,6</div>
  <div data-categories="[6]">6</div>
  <div data-categories="[5]">5</div>
  <div data-categories="[2]">2</div>
  <div data-categories="[2,5,6]">2,5,6</div>
</div>

Answer 5

你可以让你的代码变得更简单，就像@jai 说的那样我已经试过了

$('.filterMenu label').on('click', function () {
   $('.galeria div').hide()
   $('.galeria div[data-categories*="'+ $(this).data('id') +'"]').show();
});

如何 select 从属性除以逗号

How to select from attribute divided by commas

jquery

jquery-selectors