Как обрабатывать несколько атрибутов данных с помощью фильтрации jQuery? - PullRequest
Новая
       13

Как обрабатывать несколько атрибутов данных с помощью фильтрации jQuery?

0 голосов
/ 15 октября 2018

Используя этот код , что делать, если вы хотите обработать более одного атрибута данных.Например, если первый из них может быть синим или красным, он будет иметь атрибут data-colour="Blue, Red".Как я могу обновить jQuery, чтобы справиться с этим?Другими словами, теперь нужно будет искать data-value во всей строке data-colour, а не просто в точном соответствии.

Возможно ли это выполнить в приведенном ниже коде?

HTML: 

<div data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div  data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div data-brand="Nike" data-price="31" data-colour="Blue" data-size="large">
  Blue large </div>
<div data-brand="Nike" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
  <div data-brand="Addidas" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
Colours: Blue <input type="checkbox" id="BlueCB" data-type="colour" data-value="Blue" checked> 
Red <input class="chbx" type="checkbox" id="RedCB" data-type="colour" data-value="Red" checked>
Brand: Nike <input type="checkbox" id="NikeCB" data-type='brand'  data-value='Nike' checked>
Size: Large<input type="checkbox" id="LargeCB" data-type="Size"  data-value='large' checked>
Size: Medium<input type="checkbox" id="MediumCB" data-type="Size"  data-value='medium' checked>

JS: 

var $boxes = $('input[data-type]'), //all input boxes with data-type attribute
    $dataObjects =$(); //will be filled with all bound data elements
$boxes.each(function(ind, inp){     //create filter information
    var type = inp.dataset.type, value = inp.dataset.value; //for older browsers, use  $(inp).data('type')  
  var filter =  'div[data-' + type +'="' + value +'"]';     
  inp.dataset.filter = filter;
    $.merge($dataObjects,$(filter));
}); 

$boxes.change(function(){
    var blacklist = $boxes.filter(function(i,b){return !b.checked})
    .map(function(i,b){return b.dataset.filter}).toArray().join();
  $dataObjects.hide().not(blacklist).show();
});

1 Ответ

0 голосов
/ 16 октября 2018

Возможно, вы захотите прочитать страницу jQuery Selectors .

ИЛИ достаточно просто, вы можете просто включить несколько атрибутов один за другим: 

...filter("[data-colour*='red'][data-colour*='blue']")...

Сравнение текста чувствительно к регистру.

Что касается фильтрации , вы можете filter() элементы DOM из существующего списка, отфильтровать их children(), отфильтровать потомков с помощьюfind(), отфильтруйте parent() или parents() или даже выполните поиск по всему с помощью contents() (хотя я не думаю, что атрибуты будут работать против contents()).

...