Выберите фильтр по категории

Question

Я делаю фильтр по категории

моя проблема, если я задаю атрибут данных с помощью (cat1, cat2)

, он не отображается

1-е решение: Я пытался с помощью метода include, но проблема у меня есть два слова в data-attribute

2-е решение: Я пытался с индексом проблемы в условие, что он добавляет скрытый для всех div

var ext = ["cat1", "cat2", "cat3", "cat1"];

$("#ddlViewBy").on("change", function(e) {
  var name = $("#ddlViewBy option:selected").text();
  const divs = document.querySelectorAll('.full-image');
  divs.forEach(div => {
     div.classList.remove('hidden');
  });
  if (name == "Categorie") {
    divs.forEach(div => {
       length =ext.length;
      while(length--) {
   if (div.dataset['image'].indexOf(ext[length])!=-1) {
       div.classList.add("show");
   }
  else {
       div.classList.add("hidden");
   }

}

    });
  }

});

.show {
  display: block;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlViewBy">
  <option value="1">all</option>
  <option value="1">Categorie 1</option>

</select>
<div class="full-image" data-id="2" data-image="cat1">aa<img src="" />
</div>
<div class="full-image" data-id="3" data-image="cat1">bb<img src="" />
</div>
<div class="full-image" data-id="4" data-image="cat1">cc<img src="" />
</div>
<div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" />
</div>
<div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" />
</div>
<div class="full-image" data-id="6" data-image="cat1">ccs<img src="" />
</div>
<div class="full-image" data-id="7" data-image="cat1">yy<img src="" />
</div>

Answer 1

проще сделать в JS:

const s_ddlViewBy = document.querySelector('#ddlViewBy')
  ,    s_divCat = document.querySelectorAll('.full-image')
  ;
s_ddlViewBy.oninput=_=>{
  let sCat = s_ddlViewBy.value ? 'cat'+s_ddlViewBy.value : ''
  s_divCat.forEach(elm=>{
    if (elm.dataset.image.includes(sCat)) { elm.classList.remove('hidden') }
    else                                  { elm.classList.add('hidden') }
  })
}

.hidden { display: none; }

<select id="ddlViewBy">
  <option value="">all</option>
  <option value="1">Categorie 1</option>
  <option value="2">Categorie 2</option>
</select>

<div class="full-image" data-id="2" data-image="cat1"     >--aa c1    <img src="" /> </div>
<div class="full-image" data-id="3" data-image="cat2"     >--bb c2    <img src="" /> </div>
<div class="full-image" data-id="4" data-image="cat1"     >--cc c1    <img src="" /> </div>
<div class="full-image" data-id="5" data-image="cat1 cat2">--dd c1 c2 <img src="" /> </div>
<div class="full-image" data-id="5" data-image="cat1,cat2">--oo c1 c2 <img src="" /> </div>
<div class="full-image" data-id="6" data-image=""         >--xx no cat<img src="" /> </div>
<div class="full-image" data-id="7" data-image="cat2"     >--yy c2    <img src="" /> </div>

Answer 2

Вы не должны иметь одинаковое значение для всех параметров. Вы можете добавить / удалить один класс на основе выбранного в данный момент значения, используя атрибут , оканчивающийся селектором .

Попробуйте выполнить следующее:

$("#ddlViewBy").on("change", function(e) {
  var val = $("#ddlViewBy option:selected").val();
  const divs = document.querySelectorAll('.full-image');
  if(val == 'all') $('.full-image').removeClass('hidden');
  else{
    $('.full-image').addClass('hidden');
    $(`[data-image$=${val}]`).removeClass('hidden'); //notice use of template string using back tick (``)
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlViewBy">
  <option value="all">all</option>
  <option value="cat1">Categorie 1</option>
  <option value="cat2">Categorie 2</option>
  <option value="cat3">Categorie 3</option>
</select>
<div class="full-image" data-id="2" data-image="cat1">aa<img src=""/></div>
<div class="full-image" data-id="3" data-image="cat1">bb<img src=""/></div>
<div class="full-image" data-id="4" data-image="cat1">cc<img src=""/></div>
<div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" /></div>
<div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" /></div>
<div class="full-image" data-id="6" data-image="cat1">ccs<img src="" /></div>
<div class="full-image" data-id="7" data-image="cat1">yy<img src="" /></div>
<div class="full-image" data-id="5" data-image="cat3">c3<img src="" /></div>
<div class="full-image" data-id="6" data-image="cat3">c33<img src="" /></div>
<div class="full-image" data-id="7" data-image="cat3">c333<img src="" /></div>

Answer 3

var ext = ["cat1", "cat2", "cat3", "cat1"];

$("#ddlViewBy").on("change", function(e) { 
  var name = $(this).val();
	if(name == "1"){
		$('.full-image').removeClass('hidden');
		return;
	}    
	$('.full-image').addClass('hidden');
	$('.full-image').each(function(){ 
		$(`[data-image*=${name}]`).removeClass('hidden');
	}); 

});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlViewBy">
			<option value="1">all</option>
			<option value="cat1">Category 1</option> 
			<option value="cat2">Category 2</option> 
		</select>
		<div class="full-image" data-id="2" data-image="cat1">aa<img src="" />
		</div>
		<div class="full-image" data-id="3" data-image="cat1">bb<img src="" />
		</div>
		<div class="full-image" data-id="4" data-image="cat1">cc<img src="" />
		</div>
		<div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" />
		</div>
		<div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" />
		</div>
		<div class="full-image" data-id="6" data-image="cat1">ccs<img src="" />
		</div>
		<div class="full-image" data-id="7" data-image="cat1">yy<img src="" />
		</div>

Answer 4

Я немного обновил ваш пример. Пояснения в коде

$("#ddlViewBy").on("change", function(e) {
  // getting a select value could be '', '1', '2'
  const value = e.target.value;
  // getting all divs
  const divs = document.querySelectorAll('.full-image');
  // looping div
  divs.forEach(div => {
   // if value is empty (this means !value will be true)  than all divs should be visible
   // or, this or means than value is `1` or `2`, so in this case
   // if data-image includes `cat${value}` than display it
   if (!value || div.dataset.image.includes(`cat${value}`)) {
     div.classList.remove('hidden');
   } else { // otherwise - hide
     div.classList.add('hidden');
   }
  });
});

.show {
  display: block;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlViewBy">
  <option value="">all</option>
  <option value="1">Categorie 1</option>
  <option value="2">Categorie 2</option>
</select>
<div class="full-image" data-id="2" data-image="cat1">aa<img src="" />
</div>
<div class="full-image" data-id="3" data-image="cat1">bb<img src="" />
</div>
<div class="full-image" data-id="4" data-image="cat1">cc<img src="" />
</div>
<div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" />
</div>
<div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" />
</div>
<div class="full-image" data-id="6" data-image="cat1">ccs<img src="" />
</div>
<div class="full-image" data-id="7" data-image="cat1">yy<img src="" />
</div>