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

Originally from this question - I have modified this to suit.

However, my data attributes (i.e. data-mktg-brand) are comma separated.

$(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" are not returned)

What operator would let me check if a data attribute contained the checkbox data-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" >
   <div ><input data-id="Brand 1" data-type="mktg-brand"  type="checkbox"><label >Brand 1</label></div>
   <div ><input data-id="Brand 2" data-type="mktg-brand"  type="checkbox"><label >Brand 2</label></div>
   <div ><input data-id="Brand 3" data-type="mktg-brand"  type="checkbox"><label >Brand 3</label></div>
</div>
<div id="resource-attribute" >
   <div ><input data-id="Type 1" data-type="mktg-type"  type="checkbox"><label >Type 1</label></div>
   <div ><input data-id="Type 2" data-type="mktg-type"  type="checkbox"><label >Type 2</label></div>
</div>
<div id="mktg-resource-list" >
   <article  data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article  data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>

CodePudding user response：

Couple of changes done to achieve what is required. There is a spelling mistake in below mentioned code (div id).

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

Use indexOf and split to check whether string is part of comma separated values.

$(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" >
   <div ><input data-id="Brand 1" data-type="mktg-brand"  type="checkbox"><label >Brand 1</label></div>
   <div ><input data-id="Brand 2" data-type="mktg-brand"  type="checkbox"><label >Brand 2</label></div>
   <div ><input data-id="Brand 3" data-type="mktg-brand"  type="checkbox"><label >Brand 3</label></div>
</div>
<div id="resource-attribute" >
   <div ><input data-id="Type 1" data-type="mktg-type"  type="checkbox"><label >Type 1</label></div>
   <div ><input data-id="Type 2" data-type="mktg-type"  type="checkbox"><label >Type 2</label></div>
</div>
<div id="mktg-resource-list" >
   <article  data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article  data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>

CodePudding user response：

$(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" >
   <div ><input data-id="Brand 1" data-type="mktg-brand"  type="checkbox"><label >Brand 1</label></div>
   <div ><input data-id="Brand 2" data-type="mktg-brand"  type="checkbox"><label >Brand 2</label></div>
   <div ><input data-id="Brand 3" data-type="mktg-brand"  type="checkbox"><label >Brand 3</label></div>
</div>
<div id="resource-attribute" >
   <div ><input data-id="Type 1" data-type="mktg-type"  type="checkbox"><label >Type 1</label></div>
   <div ><input data-id="Type 2" data-type="mktg-type"  type="checkbox"><label >Type 2</label></div>
</div>
<div id="mktg-resource-list" >
   <article  data-mktg-brand="Brand 1, Brand 2" data-mktg-type="Type 1, Type 2" style="">
      <h3>Resource 1 Title</h3>
   </article>
   <article  data-mktg-brand="Brand 3" data-mktg-type="Type 1" style="">
      <h3>Resource 2 Title</h3>
   </article>
</div>