data-category by text

by Lucaskazama

HTML

<div class="tax">
  <input type="radio" name="group1" id="tax1">
  <label class="w-form-label" for="tax1">cat-1</label>
</div>
<div class="tax">
  <input type="radio" name="group1" id="tax2">
  <label class="w-form-label" for="tax2">cat-2</label>
</div>

<div class="item">
  <span class="category">cat-1</span>
  <span class="price">R$100</span>
  Item
</div>

<div class="item">
  <span class="category">cat-1</span>
  <span class="price">R$200</span>
  Item
</div>

CSS

.list{
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
}

.active{
  color: red;
}

.hide{
  display: none;
}

JavaScript

function formatText(selector){
	return selector.toLowerCase().replace(/[^a-z0-9]/gi, '');
}
$('.tax').each(function(){
	let tax = formatText($(this).find('.w-form-label').text());
  $(this).find('input[type="radio"]').val(tax);
});
$('.item').each(function(){
	let categories = formatText($(this).find('.category').text());
  let prices = formatText($(this).find('.price').text());
	$(this).attr('data-category', 'all-prices all-categories '+ categories + ' ' + prices )
});