检查逗号分隔的数据属性是否包含值列表

Question

最初来自 - 我对此进行了修改以适应。

但是，我的数据属性（即 data-mktg-brand）是用逗号分隔的。

$(this).data($mktgtype.data('type')) != $mktgtype.data('id');

I understand the above looks for what is not equal, but this means anything comma separated never works when one of the values is selected (i.e. selecting 'Brand 1' any articles with data-mktg-brand="Brand 1, Brand 2" 不退货)

哪个运算符会让我检查数据属性是否包含复选框数据 ID？

$(document).ready(function() {  
$('.mktg-filter').on('click', function() {
  var $mktgtypes = $('.mktg-filter:checked');
  var $items = $('#mtkg-resource-list article');

  $items.show();
  if ($mktgtypes.length == 0)
    return;

  $mktgtypes.each(function() {
    var $mktgtype = $(this);
    $items.filter(function() {
      return $(this).data($mktgtype.data('type')) != $mktgtype.data('id');
    }).hide();
  })
});
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="brand-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Brand 1" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 1</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 2" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 2</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 3" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 3</label></div>
</div>
<div id="resource-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Type 1" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 1</label></div>
   <div class="col-12 mb-1"><input data-id="Type 2" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 2</label></div>
</div>
<div id="mktg-resource-list" class="row">
   <article class="col-12 col-md-6" data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article class="col-12 col-md-6" data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>

Answer 1

为实现所需内容而进行的一些更改。下面提到的代码 (div id) 中存在拼写错误。

var $items = $('#mtkg-resource-list article');

使用 indexOf and split 检查字符串是否是逗号分隔值的一部分。

$(document).ready(function() {  
$('.mktg-filter').on('click', function() {
  var $mktgtypes = $('.mktg-filter:checked');
  var $items = $('#mktg-resource-list article');
  $items.show();
  if ($mktgtypes.length == 0)
    return;

  $mktgtypes.each(function() {
    var $mktgtype = $(this);
    $items.hide().filter(function() {
      return $(this).data($mktgtype.data('type')).split(",").map(item => item.trim()).indexOf($mktgtype.data('id')) !== -1 || 
      $(this).data("mktg-brand").split(",").map(item => item.trim()).indexOf($mktgtype.text()) !== -1;
    }).show();
  })
});
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="brand-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Brand 1" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 1</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 2" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 2</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 3" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 3</label></div>
</div>
<div id="resource-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Type 1" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 1</label></div>
   <div class="col-12 mb-1"><input data-id="Type 2" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 2</label></div>
</div>
<div id="mktg-resource-list" class="row">
   <article class="col-12 col-md-6" data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article class="col-12 col-md-6" data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>

Answer 2

$(document).ready(function() {  
  $('.mktg-filter').on('click', function() {
    var $mktgtypes = $('.mktg-filter:checked');
    //you made a typo here, 'mktg-...' not 'mtkg-...'
    var $items = $('#mktg-resource-list article');

    $items.show();
    if ($mktgtypes.length == 0)
      return;
    const checked = $mktgtypes.map(function() {
      var $mktgtype = $(this);
      return {type:$mktgtype.data('type'), value:$mktgtype.data('id')};
     }).get();
    $items.filter(function(){
       const $item = $(this);
       return !checked.some(info => $item.data(info.type).split(",").map(value => value.trim()).includes(info.value));
     }).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="brand-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Brand 1" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 1</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 2" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 2</label></div>
   <div class="col-12 mb-1"><input data-id="Brand 3" data-type="mktg-brand" class="mktg-filter mktg-brand" type="checkbox"><label class="mktg-filter-label">Brand 3</label></div>
</div>
<div id="resource-attribute" class="row">
   <div class="col-12 mb-1"><input data-id="Type 1" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 1</label></div>
   <div class="col-12 mb-1"><input data-id="Type 2" data-type="mktg-type" class="mktg-filter mktg-type" type="checkbox"><label class="mktg-filter-label">Type 2</label></div>
</div>
<div id="mktg-resource-list" class="row">
   <article class="col-12 col-md-6" data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article class="col-12 col-md-6" data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>

检查逗号分隔的数据属性是否包含值列表

Check if a comma separated data attribute contains a list of values

javascript

jquery