Блог

Хорошо, я попытаюсь объяснить это как можно лучше.

У меня на веб-сайте есть фильтр продуктов, созданный с использованием php foreach для создания заголовков и параметров фильтра из базы данных. Код, который он генерирует, приведен ниже.

 lt;div class="card mb-2 card-body alert-filters"gt; lt;h4gt;Product Filterlt;/h4gt; lt;div class="row"gt;  lt;div   class="col-md-3"gt;  lt;h5gt;Pricelt;/h5gt;  lt;input type="hidden" id="hidden_minimum_price" value="0"gt; lt;input   type="hidden" id="hidden_maximum_price" value="50"gt;  lt;p id="price_show"gt;£0 - £50lt;/pgt;  lt;div   id="price_range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-   content"gt;  lt;div class="ui-slider-range ui-corner-all ui-widget-header" style="left: 0%; width:   100%;"gt;lt;/divgt;  lt;span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"   style="left: 0%;"gt;lt;/spangt;lt;span tabindex="0" class="ui-slider-handle ui-corner-all ui-  state- default" style="left: 100%;"gt;lt;/spangt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-3"gt;  lt;h5gt;Materiallt;/h5gt;  lt;div   style="height: 180px; overflow-y: auto; overflow-x: hidden;"gt;  lt;div class="list-group-item   checkbox"gt;lt;labelgt;lt;input type="checkbox" class="common_selector brand1" value="3"gt;  Metallt;/labelgt;   lt;/divgt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input type="checkbox"  class="common_selector   brand1" value="1"gt; PLAlt;/labelgt;lt;/divgt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input   type="checkbox" class="common_selector brand1" value="4"gt; Resinlt;/labelgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div   class="col-md-3"gt;  lt;h5gt;Baselt;/h5gt;  lt;div style="height: 180px; overflow-y: auto; overflow-x: hidden;"gt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input type="checkbox"  class="common_selector   brand2" value="2"gt; Includedlt;/labelgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;input type="hidden" name="cPath" id="cPath"   value="15_13_14"gt; lt;/divgt;  

Идентификатор категории добавляется в класс «бренд». Затем это передается в jquery ниже —

 $(document).ready(function(){   filter_data();   function filter_data()  {  $('.filter_data').html('lt;div id="loading" style="" gt;lt;/divgt;');  var action = 'fetch_data';  var minimum_price = $('#hidden_minimum_price').val();  var maximum_price = $('#hidden_maximum_price').val();  var cPath = $("#cPath").val();  var brand = get_filter('brand');  $.ajax({  url:"ext/filter/fetch_data.php",  method:"POST",  data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price,   brand:brand, cPath: cPath},  success:function(data){  $("#product_list").html(data);  }  });  }   function get_filter(class_name)  {  var filter = [];  $('.' class_name ':checked').each(function(){  filter.push($(this).val());  });  return filter;  }   $('.common_selector').click(function(){  filter_data();  });   $('#price_range').slider({  range:true,  min:0,  max:50,  values:[0, 50],  step:1,  stop:function(event, ui)  {  $('#price_show').html('£'   ui.values[0]   ' - '   '£'   ui.values[1]);  $('#hidden_minimum_price').val(ui.values[0]);  $('#hidden_maximum_price').val(ui.values[1]);  filter_data();  }  });  });  

Это прекрасно работает, если я не добавляю идентификатор категории, так как он просто использует «бренд».

То, что я хочу сделать, это иметь var для «brand1», «brand2» и т. Д. В зависимости от того, сколько существует категорий или способ их группировки, и я могу разделить их на странице продолжения.

Если я вас правильно понимаю, вам нужен способ перебирать разные бренды, не зная заранее, что это за бренды. Вы используете название бренда в качестве класса. Вместо этого вы можете установить его как отдельный атрибут (не имя класса), чтобы упростить его разделение. Здесь я использовал data-brand для хранения названия бренда и простой цикл для сбора идентификаторов проверенных категорий после нажатия.

Обновление: Не уверен, нужны ли вам значения идентификатора категории или названия брендов, поэтому эта функция фильтра возвращает и то, и другое. Посмотрите на консоль.журнал, который я туда положил.

 $(document).ready(function() {   filter_data();   function filter_data() {  $('.filter_data').html('lt;div id="loading" style="" gt;lt;/divgt;');  var action = 'fetch_data';  var minimum_price = $('#hidden_minimum_price').val();  var maximum_price = $('#hidden_maximum_price').val();  var cPath = $("#cPath").val();  var filter = get_filter('brand');  // to get the brand names: filter.brand  // or if you wan tthe category values: filter.values  $.ajax({  url: "ext/filter/fetch_data.php",  method: "POST",  data: {  action: action,  minimum_price: minimum_price,  maximum_price: maximum_price,  brand: filter.brand,  cPath: cPath  },  success: function(data) {  $("#product_list").html(data);  }  });  }    // filters by dataset and value  function get_filter(what) {  let filter = {  [what]: [],  values: []  };  $('.common_selector:checked').each(function() {  let b = $(this).data(what)  if (!filter[what].includes(b)) filter[what].push(b)  filter.values.push($(this).val())  })  console.log('filter', filter)  return filter;  }   $('.common_selector').click(function() {  filter_data();  });   /*$('#price_range').slider({  range:true,  min:0,  max:50,  values:[0, 50],  step:1,  stop:function(event, ui)  {  $('#price_show').html('£'   ui.values[0]   ' - '   '£'   ui.values[1]);  $('#hidden_minimum_price').val(ui.values[0]);  $('#hidden_maximum_price').val(ui.values[1]);  filter_data();  }  });*/  }); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="card mb-2 card-body alert-filters"gt;  lt;h4gt;Product Filterlt;/h4gt;  lt;div class="row"gt;  lt;div class="col-md-3"gt;  lt;h5gt;Pricelt;/h5gt;  lt;input type="hidden" id="hidden_minimum_price" value="0"gt; lt;input type="hidden" id="hidden_maximum_price" value="50"gt;  lt;p id="price_show"gt;£0 - £50lt;/pgt;  lt;div id="price_range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-   content"gt;  lt;div class="ui-slider-range ui-corner-all ui-widget-header" style="left: 0%; width:   100%;"gt;lt;/divgt;  lt;span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"gt;lt;/spangt;lt;span tabindex="0" class="ui-slider-handle ui-corner-all ui-  state- default" style="left: 100%;"gt;lt;/spangt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-3"gt;  lt;h5gt;Materiallt;/h5gt;  lt;div style="overflow-y: auto; overflow-x: hidden;"gt;  lt;div class="list-group-item   checkbox"gt;lt;labelgt;lt;input type="checkbox" class="common_selector" data-brand="brand1" value="3"gt;  Metallt;/labelgt;  lt;/divgt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input type="checkbox"  class="common_selector" data-brand="brand1" value="1"gt; PLAlt;/labelgt;lt;/divgt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input   type="checkbox" class="common_selector" data-brand="brand1" value="4"gt; Resinlt;/labelgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-3"gt;  lt;h5gt;Baselt;/h5gt;  lt;div style="overflow-y: auto; overflow-x: hidden;"gt;  lt;div class="list-group-item checkbox"gt;lt;labelgt;lt;input type="checkbox"  class="common_selector" data-brand="brand2" value="2"gt; Includedlt;/labelgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;input type="hidden" name="cPath" id="cPath" value="15_13_14"gt;  lt;/divgt;